jQuery总和复选框值答案

【问题标题】：jQuery sum checkbox valuesjQuery总和复选框值
【发布时间】：2016-03-21 16:18:22
【问题描述】：

我需要计算所有复选框的总和并根据这里的选择更新总数是 html：

<input type="checkbox" id="basic_single" name="basic_single" value="400">
<input type="checkbox" id="basic_double" name="basic_double" value="680">
.
.
.
<input type="text" name="total" value="" size="30" id="total">

这是脚本

   $('input:checkbox').change(function ()
     {
      var total = 0;
      var basic_single = parseInt($('#basic_single:checked').val());
      var basic_double = parseInt($('#basic_double:checked').val());

      var total = basic_single + basic_double;

      $("#total").val(total);

    });

如果两者都被选中，它工作正常，但只有一个被选中返回 NaN，将有更多的复选框，而不仅仅是这两个

【问题讨论】：

stackoverflow.com/questions/5066537/…

标签： jquery checkbox input

【解决方案1】：

您只需考虑选中的项目即可计算总数。为此，您只能定位被检查的元素并遍历每个循环以添加它们的值以计算总和。以下示例不涉及对单个元素进行硬编码。

$('input:checkbox').change(function ()
{
      var total = 0;
      $('input:checkbox:checked').each(function(){ // iterate through each checked element.
        total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
      });     
      $("#total").val(total);

});

例如：https://jsfiddle.net/8p3ftmuh/2/

【讨论】：

@BenyBondBanjarnahor：我不知道你的 html 是什么样的，所以不知道就无能为力。创建一个小提琴。

【解决方案2】：

您可以使用.not() 将#total 元素值从计算中排除，.get()、Array.prototype.reduce()、+ 运算符将value 的:checkbox 转换为Number

$(":checkbox").change(function(event) {
  $("#total").val(function() {
    return $(event.target.tagName).not("[type=text]")
    .get().reduce(function(a, b) {
        return +a.value + +b.value
    })
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="checkbox" id="basic_single" name="basic_single" value="400">
<input type="checkbox" id="basic_double" name="basic_double" value="680">
<input type="text" name="total" value="" size="30" id="total">

【讨论】：