使用Jquery使用复选框计算值错误结果

Question

现在我正在使用 JQuery 和 PHP 代码计算复选框值。该机制是，当用户选中复选框时，它将对价格进行求和。我实现了 JQuery 的公式，但结果不正确。这是我的代码

查询

<script>

$(function() {

      $('.dealprice').on('input', function(){

        const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val(); 

        var eachPrice = 0;

        $('.dealprice:checkbox:checked').each(function(){

            eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);

        }); 

        $("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));

        

    });

 });

    </script>

了解更多详情。我在这个网站上制作了一个示例 https://repl.it/@ferdinandgush/Sum-Calculate-checkbox只需单击“运行”按钮，您就可以测试它。我需要按照该表格格式显示正确的计算

请帮忙。

Answer 1

您只需在循环内定义 getItemPrice 即可，否则您只需为单击的项目计算一次，而不是为每个项目执行一次。$(function() {&nbsp; &nbsp; &nbsp; $('.dealprice').on('input', function(){&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var eachPrice = 0;&nbsp; &nbsp; &nbsp; &nbsp; $('.dealprice:checkbox:checked').each(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; });&nbsp;});<table class="tg"><thead>&nbsp; <tr>&nbsp; &nbsp; <th class="tg-qh0q">Item</th>&nbsp; &nbsp; <th class="tg-qh0q">Price</th>&nbsp; &nbsp; <th class="tg-qh0q">Deal</th>&nbsp; </tr></thead><tbody>&nbsp; <tr>&nbsp; &nbsp; <td class="tg-0lax">Book</td>&nbsp; &nbsp; <td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>&nbsp; &nbsp; <td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][0]"></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td class="tg-0lax">Pencil</td>&nbsp; &nbsp; <td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>&nbsp; &nbsp; <td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][1]"></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td class="tg-0lax">Pen</td>&nbsp; &nbsp; <td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>&nbsp; &nbsp; <td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][2]"></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td class="tg-amwm" colspan="2">Total</td>&nbsp; &nbsp; <td class="tg-0lax"><span id="totalDeal">0</span></td>&nbsp; </tr></tbody></table><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

您必须将getItemPrice其放入检查的函数内部。请检查以下代码：$(function() {&nbsp; $('.dealprice').on('input', function(){&nbsp; &nbsp; var eachPrice = 0;&nbsp; &nbsp; $('.dealprice:checkbox:checked').each(function(){&nbsp; &nbsp; &nbsp; const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();&nbsp; &nbsp; &nbsp; eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);&nbsp; &nbsp; });&nbsp;&nbsp; &nbsp; $("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));&nbsp; });});另请检查此 repl https://repl.it/repls/LavenderAgonizingRoot