javascript - 将组中的复选框项目乘以相对数字字段

Question

我有一个代码，可以在选中时将复选框项目乘以数字字段。当一个复选框数组中有多个项目时，它只会将第一个项目相乘。如何分离复选框组？是否应该为每个项目创建唯一的名称和脚本？

JSFiddle这里

这是我的 HTML:

<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
    <input type="number" name="product_1_qty[]" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>


<p>Total: PHP <span id='total'>0</span></p>

这是脚本

$(document).ready(function () {
    var sum = 0;
    var qty = 0;

    $("input[type=checkbox]").change(function () {
        if ($('.1').is(':checked')) {
            $('.checked-1').show(); 
        } else {
            $('.checked-1').hide();
        }
    });
     $('.qty').bind('keyup mouseup', function () { // if user typed anyting in the Quantity
          sum = parseInt($('.1').val()); // get checkbox value and change the data type to int
          qty = parseInt($(this).val()); // get Quantity value and change the data type to int
          //console.log(sum,qty);
          if(sum && qty) { // if the values was not empty
              $('#total').text(sum * qty); // show the result in the total element
          } else { // if the values was empty
              $('#total').val(''); // clear the result textbox
          }
     });
});

我想在一个复选框数组中包含多个项目

<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
    <input type="number" name="product_1_qty[]" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>


<p>Total: PHP <span id='total'>0</span></p>

<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
    <input type="number" name="product_1_qty[]" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>


<p>Total: PHP <span id='total'>0</span></p>

<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
    <input type="number" name="product_1_qty[]" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>


<p>Total: PHP <span id='total'>0</span></p>

当我这样做时，代码就会出错。 提前致谢!

Answer 1

如果您要重复相同的 HTML block ，则应该使用类而不是 ID(因为 ID 需要唯一)，然后使用 jQuery's tree traversal methods找到正确的表单元素。

$(document).ready(function() {
  var sum = 0;
  var qty = 0;

  $("input[type=checkbox]").change(function() {
    if ($(this).is(':checked')) {
      $(this).next('.checked-1').show();
    } else {
      $(this).next('.checked-1').hide();
    }
  });
  $('.qty').bind('keyup mouseup', function() { // if user typed anyting in the Quantity
    sum = parseInt($(this).parent().prev('.1').val()); // get checkbox value and change the data type to int
    qty = parseInt($(this).val()); // get Quantity value and change the data type to int
    //console.log(sum,qty);
    if (sum && qty) { // if the values was not empty
      $(this).parent().next('p').find('.total').text(sum * qty); // show the result in the total element
    } else { // if the values was empty
      $(this).parent().next('p').find('.total').val(''); // clear the result textbox
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
  <input type="number" name="product_1_qty[]" id="" placeholder="Quantity" class=" qty" value="0" />
</div>
<p>Total: PHP <span class='total'>0</span>
</p>



<input type="checkbox" class="1" value="30" name="1" />
<div style="display:none;" class="checked-1">
  <input type="number" name="product_1_qty[]" id="" placeholder="Quantity" class=" qty" value="0" />
</div>
<p>Total: PHP <span class='total'>0</span>
</p>