將組中的復選框項乘以相對數字字段

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 塊，您應該使用類而不是 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>