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

Multiplying checkbox item in a group to relative number field

本文关键字：相对 相对数 数字 字段 复选框      更新时间：2023-09-26

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

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>

当我这样做时，代码出错了。提前感谢！

如果你要重复相同的HTML块，你应该使用类而不是ID（因为ID必须是唯一的），然后使用jQuery的树遍历方法来找到正确的表单元素。

$(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>

相关文章：