如何对选中的值求和更改复选框jquery

How to sum value of checked changed checkbox jquery?

本文关键字：求和 复选框 jquery      更新时间：2023-09-26

我有一个表格，每个复选框包含一个值，我想对复选框的值求和。

例子:

糖果和水被选中:计数= 2，糖果，食物和水被选中:计数= 5，复选框未被选中:计数= 0。我想我必须有两个事件，每个复选框的事件(.checkbox1)和复选框的事件(.check_all)。

Javascript

      var count = 0;
            $(".checkbox1").change(function() {
                var table_abc = document.getElementsByClassName("checkbox1");
                for (var i = 0; table_abc[i]; ++i) {
                    if (table_abc[i].checked) {
                        count += table_abc[i].value;
                    }
                }
           });
alert(count);


<table id="div_table">
    <thead>
        <tr>
            <th><input type="checkbox" class="check_all" id="chk_all" /></th>
            <th>Check All</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="checkbox1" id="candy" value="2" /></td>
            <td>Candy</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox1" id="food" value="3" /></td>
            <td>Food</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox1" id="water" value="0" /></td>
            <td>Water</td>
        </tr>
    </tbody>
</table>

但它似乎不起作用。你能告诉我怎么做错吗?

这是您的脚本，稍微改进了一下我在这里使用jquery .prop()方法来获取每个元素的检查属性，而不是直接与count的值进行连接你必须使用Number(number)或parseInt(number,base)来告诉js引擎，嘿，我希望它是一个算术运算，而不是一个连接

下面是改进后的代码片段:

$(document).ready(function(){
 var count;
            $(".checkbox1").change(function() {
                count = 0;
                var table_abc = $('.checkbox1');
                for (var i = 0; i < table_abc.length ; ++i) {

                    if ($(table_abc[i]).prop('checked')) {
                        count += parseInt($(table_abc[i]).val(),10);
                    }
                }
            console.log(count);
           });

});

我们记录到屏幕count的值每次一个复选框(类checkbox1)的状态被改变

首先，我将变量count的声明移到change函数内部，以避免重复检查未检查的无效值

然后你应该将checkbox的值转换为一个数字，这样你的总和就会得到正确的值

检查这个小提琴，它工作

使用下面的代码片段

var count = 0;
            $('input[type="checkbox"]').on("change", function() {
               count = 0;
                if($(this).hasClass('check_all')){
                  
                  $('input[type="checkbox"][class="checkbox1"]').prop('checked',true);
                   $('input[type="checkbox"][class="checkbox1"]').each(function(){
                  
                      count += parseInt($(this).val());
                     
                    });
                  
                  }else{
                    $('input[type="checkbox"]:checked').each(function(){
                  
                      count += parseInt($(this).val());
                    });
                  }
              alert(count);
           });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="div_table" >
<thead>
<tr>
<th><input type="checkbox" class="check_all" id="chk_all" /></th>
<th>Check All</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="checkbox1"  id="candy" value="2" /></td>
<td>Candy</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox1"  id="food" value="3" /></td>
<td>Food</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox1"  id="water" value="0" /></td>
<td>Water</td>
</tr>
</tbody>
</table>

你的javascript代码似乎是错误的。试后

$(document).ready(function(){
    $(".checkbox1").change(function() {
        var count = 0;
        var table_abc = document.getElementsByClassName("checkbox1");
        for (var i = 0; table_abc[i]; ++i) {
            if (table_abc[i].checked) {
                count += parseInt(table_abc[i].value);
            }
        }
        alert(count);
    });
});

您可以使用jquery .each函数轻松地遍历所有复选框，如下所示:

(function($){
  $("input[name='opt']").change(function() {
    count = 0;
    $("input[name='opt']").each(function(index, checkbox){
      if(checkbox.checked)
        count += parseInt(checkbox.value) // convert to integer
    })
    alert(count);
  });
})(jQuery);

注意事项:

  1. $("input[name='opt']").change将name='opt'的所有输入复选框绑定到所提供的事件处理程序。
  2. count变量被移动到change事件处理程序中，因为它需要重置为0并在每次更改复选框时重新计算。
  3. $("input[name='opt']").each(function(index, checkbox)用name='opt'迭代所有输入复选框。
  4. 要正确地求和，您需要使用parseInt将字符串值转换为整数。而不是使用class="checkbox1"，我使用name='opt'在我的代码组所有复选框在一起。

查看完整的HTML和JS代码。

相关文章：