在不影响其他复选框的情况下更改复选框的属性

时间：2019-07-01 16:54:41

标签： jquery class for-loop input

我正在尝试创建一个表格，该表格每天和几天的时间总和为一个值，但是当我尝试重新创建php产品的while语句时，该语句会提取所有行，然后为每行显示信息不要单独工作。我试图使它能作为可添加的男人行工作，同时试图将代码保持在最低限度。

提琴手正在研究的是这里https://jsfiddle.net/shiataz12/oj51vfpm/111/。

假定表单是php while循环的一部分，其中每种表单都是数据库中的新行。 #nosday是$ _POST元素。所有输入均提交到另一页面。

到目前为止，我尝试使用eq（i）来按类或名称以及$（'＃formaddi'+ i）.children作为函数的前缀来隔离元素。我尝试将一些复选框更改为单选按钮，在这些单选按钮中，我只需要选择一个即可减少执行此操作所需的一些代码，但是当选择标准时，我仍然需要禁用onetent和twotent选项，但是它将禁用所有他们。

每种形式都应单独工作，我也尝试过使用诸如^之类的选择器来隔离ID或类，但它要么不起作用，要么全部协同工作。任何想法的建议。理想情况下，一个api页面可提供最佳功能，以便一次选择一种形式的特定输入。

<input type="text" value="5" id="nosday"><br><br>
<input type="hidden" value="3" id="countrows"><br>
////////////////////////FIRST FORM/////////////////////////////
<br>
<form id="formaddi1" class="formadd1">

<label for="standardi1">Standard</label>
<input type="checkbox" name="packn1" id ="standardi1" class="pack1 standard1 qr1" value="1050" checked><br><br>

<label for="equippedi1">Equipped</label>
<input type="checkbox" name="packn1" id ="equippedi1" class="pack1 equipped1 qr1" value="0" ><br><br>

<label for="gpsi1">GPS</label>
<input type="checkbox" name="gpsn1" id ="gpsi1" value="20" class ="gps1 qr1"><br><br>

<label for="boosteri1">booster</label>
<input type="checkbox" name="boostern1" id ="boosteri1" value="20" class =" booster1 qr1"><br><br>

<label for="onetenti1">One tent</label>
<input type="checkbox" name="tentn1" id ="onetenti1" class="stent1 onetent1 qr1" value="1350" disabled><br><br>

<label for="twotenti1">Two tents :</label>
<input type="checkbox" name="tentn1" id ="twotenti1" class="stent1 twotent1 qr1" value="1450" disabled><br><br>
Daily :<span id="dailytotali1"> </span><br><br>
Total :<span id="lengthtotali1"> </span>
<br><br>
<br><input tyep="text" id="dailytoti1" name="pricefn11" value="">
<br><input tyep="text" id="lengthtoti1" name="pricefn21" value="">
<br><br><br>
</form>
////////////////////////SECOND FORM/////////////////////////////
<BR>
<form id="formaddi2" class="formadd2">
<label for="standardi2">Standard</label>
<input type="radio" name="packn2" id ="standardi2" class="quip2 standard2 qr2" value="125" checked><br><br>

<label for="equippedi2">Equipped</label>
<input type="radio" name="packn2" id ="equippedi2" class="quip2 equipped2 qr2" value="0" ><br><br>

<label for="gpsi2">GPS</label>
<input type="checkbox" name="gpsn2" id ="gpsi2" value="20" class ="gps2 qr2"><br><br>

<label for="boosteri2">booster</label>
<input type="checkbox" name="boostern2" id ="boosteri2" value="20" class ="booster2 qr2"><br><br>

<label for="onetenti2">One tent</label>
<input type="radio" name="tentn2" id ="onetenti2" class="stent2 onetent2 qr2" value="1350" disabled><br><br>

<label for="twotenti2">Two tents :</label>
<input type="radio" name="tentn2" id ="twotenti2" class="stent2 twotent2 qr2" value="1450" disabled><br><br>
Daily :<span id="dailytotali2"> </span><br><br>
Total :<span id="lengthtotali2"> </span><br><br>

<br><input tyep="text" id="dailytoti2" name="pricefn12" value="">
<br><input tyep="text" id="lengthtoti2" name="pricefn22" value="">
<br><br><br>
</form>
////////////////////////THIRD FORM/////////////////////////////
<form id="formaddi3" class="formadd3">
<br>
<label for="standardi3">Standard</label>
<input type="checkbox" name="packn3" id ="standardi3" class="quip3 standard3 qr3" value="1050" checked><br><br>

<label for="equippedi3">Equipped</label>
<input type="checkbox" name="packn3" id ="equippedi3" class="quip3 equipped3 qr3" value="0" ><br><br>

<label for="gpsi3">GPS</label>
<input type="checkbox" name="gpsn3" id ="gpsi3" value="20" class ="gps3 qr3"><br><br>

<label for="boosteri3">booster</label>
<input type="checkbox" name="boostern3" id ="boosteri3" value="20" class ="booster3 qr3"><br><br>

<label for="onetenti3">One tent</label>
<input type="checkbox" name="tentn3" id ="onetenti3" class="stent3 onetent3 qr3" value="1350" disabled><br><br>

<label for="twotenti3">Two tents :</label>
<input type="checkbox" name="tentn3" id ="twotenti3" class="stent3 twotent3 qr3" value="1450" disabled><br><br>
Daily :<span id="dailytotali3"> </span><br><br>
Total :<span id="lengthtotali3"> </span><br><br>

<br><input tyep="text" id="dailytoti3" name="pricefn13" value="">
<br><input tyep="text" id="lengthtoti3" name="pricefn23" value="">
<form>

function Calc() {
    //get the values of the selected options
      var counter = $("#countrows").val();
      let totals = [];
            for (i = 1; i <= counter; i++) {
      totals[i] = 0;
      $.each($('.qr' + i + ':checked'), function() {
        totals[i] += parseInt($(this).val());
      });
      console.log(totals[i]);
    $('#dailytotali' + i).text('R' + totals[i] + '/day');
    $('#lengthtotali' + i).text('R' + totals[i] * parseFloat($("#nosday").val()) + '/day');
    $('#dailytoti' + i).val(totals[i]);
    $('#lengthtoti' + i).val(totals[i] * parseFloat($("#nosday").val()));

      }

}       
Calc();

$("[class*=qr]").on("change", function(e) {
e.preventDefault();
Calc();

});

function Equip() 
    {
    var counter1 = $("#countrows").val();
        for (i = 1; i <= counter1; i++) {
$('input.onetent'+ i).eq(i).prop("disabled", false);
$('input.twotent'+ i).eq(i).prop("disabled", false);
$('input.onetent'+ i).eq(i).prop("checked", true);
$('input.standard'+ i).eq(i).prop("checked", false);
        }
    }
    function Standard() 
    {
    var counter2 = $("#countrows").val();
        for (i = 1; i <= counter2; i++) {
    $('#formaddi'+ i).children('input.onetent'+ i).eq(i).prop("checked", false);
    $('#formaddi'+ i).children('input.twotent'+ i).eq(i).prop("checked", false);
        $('#formaddi'+ i).children('input.onetent'+ i).eq(i).prop("disabled", true);
        $('#formaddi'+ i).children('input.twotent'+ i).eq(i).prop("disabled", true);
    $('#formaddi'+ i).children('input.equipped'+ i).eq(i).prop("checked", false);
        }
    }
    function twoTent()
    {
    var counter3 = $("#countrows").val();
    for (i = 1; i <= counter3; i++) {
        $('#formaddi'+ i).children('input.onetent'+ i).eq(i).prop("checked", false);
    }
    }
    function oneTent()
    {
    var counter4 = $("#countrows").val();
    for (i = 1; i <= counter4; i++) {
        $('#formaddi'+ i).children('input.twotent'+ i).eq(i).prop("checked", false);
    }
    }
$("[id^=standardi]").click(function() {
Standard();
});
$("[id^=equippedi]").click(function() {
Equip();
});
$("[id^=onetenti]").click(function() {
oneTent();
}); 
$("[id^=twotenti]").click(function() {
twoTent();

1 个答案:

答案 0 :(得分：0)

答案和解释链接：Select characters after index in order to select another element with the same characters

以下代码：

function Calc() {
  //get the values of the selected options
  var counter = $("#countrows").val();
  let totals = [];
  for (i = 1; i <= counter; i++) {
    totals[i] = 0;
    $.each($('.qr' + i + ':checked'), function() {
      totals[i] += parseInt($(this).val());
    });
    console.log(totals[i]);
    $('#dailytotali' + i).text('R' + totals[i] + '/day');
    $('#lengthtotali' + i).text('R' + totals[i] * parseFloat($("#nosday").val()) + '/day');
    $('#dailytoti' + i).val(totals[i]);
    $('#lengthtoti' + i).val(totals[i] * parseFloat($("#nosday").val()));

  }

}
Calc();

$("[class*=qr]").on("change", function(e) {
  e.preventDefault();
  Calc();

});

function Equip(thisid) {
  var that = $(thisid).attr('id');
  var thisstr1 = String(that);
  var lastChar = thisstr1.substr(thisstr1.lastIndexOf('i') + 1);
  console.log(that);
  console.log(thisstr1);
  console.log(lastChar);
  $('input.onetentc' + lastChar).prop("disabled", false);
  $('input.twotentc' + lastChar).prop("disabled", false);
  $('input.onetentc' + lastChar).prop("checked", true);
  $('input.standardc' + lastChar).prop("checked", false);
}

function Standard(thisid) {
  var that1 = $(thisid).attr('id');
  var thisstr = String(that1);
  var lastChar1 = thisstr.substr(thisstr.indexOf('i') + 1)
  console.log(that1);
  console.log(thisstr);
  console.log(lastChar1);
  $('input.onetentc' + lastChar1).prop("checked", false);
  $('input.twotentc' + lastChar1).prop("checked", false);
  $('input.onetentc' + lastChar1).prop("disabled", true);
  $('input.twotentc' + lastChar1).prop("disabled", true);
}
$("[id*=standardi]").click(function() {
  Standard($(this));
});
$("[id*=equippedi]").click(function() {
  Equip($(this));
});
input[type="radio"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  -ms-appearance: checkbox;
  /* not currently supported */
  -o-appearance: checkbox;
  /* not currently supported */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="5" id="nosday"><br><br>
<input type="hidden" value="3" id="countrows"><br> ////////////////////////FIRST FORM/////////////////////////////
<br>
<form id="formaddi1" class="formadd1">

  <label for="standardi1">Standard</label>
  <input type="radio" name="packn1" id="standardi1" class="pack1 standardc1 qr1" value="1050" checked><br><br>

  <label for="equippedi1">Equipped</label>
  <input type="radio" name="packn1" id="equippedi1" class="pack1 equippedc1 qr1" value="0"><br><br>

  <label for="gpsi1">GPS</label>
  <input type="checkbox" name="gpsn1" id="gpsi1" value="20" class="gpsc1 qr1"><br><br>

  <label for="boosteri1">booster</label>
  <input type="checkbox" name="boostern1" id="boosteri1" value="20" class=" boosterc1 qr1"><br><br>

  <label for="onetenti1">One tent</label>
  <input type="radio" name="tentn1" id="onetenti1" class="stent1 onetentc1 qr1" value="1350" disabled><br><br>

  <label for="twotenti1">Two tents :</label>
  <input type="radio" name="tentn1" id="twotenti1" class="stent1 twotentc1 qr1" value="1450" disabled><br><br> Daily :<span id="dailytotali1"> </span><br><br> Total :<span id="lengthtotali1"> </span>
  <br><br>
  <br><input tyep="text" id="dailytoti1" name="pricefn11" value="">
  <br><input tyep="text" id="lengthtoti1" name="pricefn21" value="">
  <br><br><br>
</form>
////////////////////////SECOND FORM/////////////////////////////
<BR>
<form id="formaddi2" class="formadd2">
  <label for="standardi2">Standard</label>
  <input type="radio" name="packn2" id="standardi2" class="quip2 standardc2 qr2" value="125" checked><br><br>

  <label for="equippedi2">Equipped</label>
  <input type="radio" name="packn2" id="equippedi2" class="quip2 equippedc2 qr2" value="0"><br><br>

  <label for="gpsi2">GPS</label>
  <input type="checkbox" name="gpsn2" id="gpsi2" value="20" class="gpsc2 qr2"><br><br>

  <label for="boosteri2">booster</label>
  <input type="checkbox" name="boostern2" id="boosteri2" value="20" class="boosterc2 qr2"><br><br>

  <label for="onetenti2">One tent</label>
  <input type="radio" name="tentn2" id="onetenti2" class="stent2 onetentc2 qr2" value="1350" disabled><br><br>

  <label for="twotenti2">Two tents :</label>
  <input type="radio" name="tentn2" id="twotenti2" class="stent2 twotentc2 qr2" value="1450" disabled><br><br> Daily :<span id="dailytotali2"> </span><br><br> Total :<span id="lengthtotali2"> </span><br><br>

  <br><input tyep="text" id="dailytoti2" name="pricefn12" value="">
  <br><input tyep="text" id="lengthtoti2" name="pricefn22" value="">
  <br><br><br>
</form>
////////////////////////THIRD FORM/////////////////////////////
<form id="formaddi3" class="formadd3">
  <br>
  <label for="standardi3">Standard</label>
  <input type="radio" name="packn3" id="standardi3" class="quip3 standardc3 qr3" value="1050" checked><br><br>

  <label for="equippedi3">Equipped</label>
  <input type="radio" name="packn3" id="equippedi3" class="quip3 equippedc3 qr3" value="0"><br><br>

  <label for="gpsi3">GPS</label>
  <input type="checkbox" name="gpsn3" id="gpsi3" value="20" class="gpsc3 qr3"><br><br>

  <label for="boosteri3">booster</label>
  <input type="checkbox" name="boostern3" id="boosteri3" value="20" class="boosterc3 qr3"><br><br>

  <label for="onetenti3">One tent</label>
  <input type="radio" name="tentn3" id="onetenti3" class="stent3 onetentc3 qr3" value="1350" disabled><br><br>

  <label for="twotenti3">Two tents :</label>
  <input type="radio" name="tentn3" id="twotenti3" class="stent3 twotentc3 qr3" value="1450" disabled><br><br> Daily :<span id="dailytotali3"> </span><br><br> Total :<span id="lengthtotali3"> </span><br><br>

  <br><input tyep="text" id="dailytoti3" name="pricefn13" value="">
  <br><input tyep="text" id="lengthtoti3" name="pricefn23" value="">
</form>

经过几个小时的研究，我提出了解决问题的方法，方法是从20多个不同的堆栈溢出问题中提取信息，以便提出一个简单的解决方案。如果有任何不正确的信息，我深表歉意，请随时对我的错误发表评论。如果您还有其他建议，我欢迎您。

将$(this);从click函数传递到function Standard ()和function Equip()。为$(this)创建了一个变量，以用于lastChar的变量赋值，该变量赋值在Index之后。 String()用于将对象$(this)转换为字符串并分配给新变量thisstr。通过使用lastChar将lastIndexOf变量分配给索引后的字符，该变量在字符串中找到最后一个与索引匹配的索引并在其后提供任何字符。

var lastChar = thisstr1.substr(thisstr1.lastIndexOf('i') + 1);

用于查找('i')之后的字符，其中i是字符串中的最后一个字符。

var thisstr = String(that); 是将var that = $(this).attr('id');从对象转换为字符串的行，因为在以下示例中，`$（this）用于引用DOM元素而不是特定字符串：

$("#id").click(functon()
{
  var vas = $(this).val();
  var do = (".class").text(vas);
});

$(this)是DOM元素，即完整的输入，div，span等。 val（）是查找该元素值的定义。 这在使用短手编码并方便引用所涉及的元素时很方便，并且可以在循环，函数中使用，从一个功能到下一个功能。等

为避免选中或取消选中；复选框我决定去伪装成复选框的单选按钮，只是因为我需要它们是为了美观。 console.log();并不是我真正需要的，但我把它留在了那里以检查一切是否正常。

相关问题
最新问题