JQuery - 根據父類求和復選框值

Question

我有對所有選中的復選框求和的腳本，但我只想對父 div 具有 class="show_list_item" 的復選框值求和

 $('input:checkbox').change(function (){ var total_srvs_amount = 0; $('input[name="amount"]:checkbox:checked').each(function(){ total_srvs_amount += isNaN($(this).val()) ? 0 : parseInt ($(this).val()); console.log(total_srvs_amount); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="show_list_item"> <input type="checkbox" name="amount" value="100"> <input type="checkbox" name="amount" value="120"> </div> <div class="hide_list_item"> <input type="checkbox" name="amount" value="85"> <input type="checkbox" name="amount" value="90"> </div>

Answer 1

您可以更改選擇器以在.show_list_item內的復選框上應用該功能：

 $('.show_list_item input:checkbox').change(function () { var total_srvs_amount = 0; $('.show_list_item input[name="amount"]:checkbox:checked').each(function(){ total_srvs_amount += isNaN($(this).val()) ? 0 : parseInt ($(this).val()); console.log(total_srvs_amount); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="show_list_item"> <input type="checkbox" name="amount" value="100"> <input type="checkbox" name="amount" value="120"> </div> <div class="hide_list_item"> <input type="checkbox" name="amount" value="85"> <input type="checkbox" name="amount" value="90"> </div>