javascript - 获取表格每一行的复选框总和

问题描述

我想获取表格中每一行的复选框的总和

Javascript：求和

        $('input[type="checkbox"]').change(function() 
      {
            var total = 0;
        $('#mytable tr').each(function()
      {
            total += parseInt($(this).val());    
        $(this).parents('tr').find('input[type=text]:last').val(total);
      }); 
     });

Javascript：计数

        $('input[type="checkbox"]').change(function() {
        $('#mytable tr').each(function() {
           var count = $(this).find(':checkbox:checked').length;
         $(this).find('#count').val(count);
       });
       });

我的 HTML：

               <div class="container">
               <div class="row">
               <div class="col-md-2">
                <?php
                    $i=1;
                    $sql="select namefrom
    `student` where EXTRACT(YEAR FROM colRegisteredDate)= 2015";
                    $result = mysql_query($sql) or die(mysql_error()); 
                    $data=array();
                ?>
                 <table id="mytable" style="width:100%;">
                    <tr align="center" >
                        <th style="padding:2.5px;
                          width: 10%;" rowspan="2">S.NO</th>
                     <th style="padding:2.5px; 
                          width: 55%;" rowspan="2">StudentID</th>
                     <th style="padding:2.5px;" 
                          colspan="5" style="text-align:center;">subject</th>
                     <th style="padding:2.5px;" rowspan="2">Sum</th>
                        </tr>
                        <tr>
                     <th>s1 <input type="checkbox" 
                         id="selectAll" onclick="SelectAll(this)" /></th>
                     <th>s2 <input type="checkbox" 
                         id="selectAll" onclick="SelectAll(this)"/></th>
                     <th>s3 <input type="checkbox" 
                         id="selectAll"onclick="SelectAll(this)" /></th>
                     <th>s4 <input type="checkbox"
                          id="selectAll" onclick="SelectAll(this)" /></th>
                     <th>s5 <input type="checkbox" 
                          id="selectAll" onclick="SelectAll(this)"/></th>
                    </tr>
                        <li>
                           <?php
                              while ($row = mysql_fetch_array($result)){
                                
                              //$row = mysql_fetch_assoc($result); 
                              $data[]=$row['name'];
                              $number=$row['name'];
                              $_SESSION['Roll']=$number;
                              $str = implode("\n", $data);
                              $_SESSION['value']=$number;
                              $_SESSION['url']="index.php?StudentID=$number";
                              ?>
                           <?php
                              ?>
                           <tr>
                              <td><?php echo $i; ?></td>
                              <td><a href="#" data-id='
                 <?php echo $number; ?>' class="link" id="link">  
                                 <?php
                                    echo  "$number";
                                    ?>
                        </li>
                        </a></td>
                        <td><input type="checkbox" name="checkbox"
               id="a" class="sum" value="10" data-toggle="checkbox"><br></td>
                        <td><input type="checkbox" name="checkbox"
               id="b" class="sum" value="10" data-toggle="checkbox"><br></td>
                        <td><input type="checkbox" name="checkbox"
              id="c" class="sum" value="10" data-toggle="checkbox"><br></td>
                        <td><input type="checkbox" name="checkbox"
              id="d" class="sum" value="10" data-toggle="checkbox"><br></td>
                        <td><input type="checkbox" name="checkbox"
              id="e" class="sum" value="10" data-toggle="checkbox"><br></td>
                        <td><input  type="text" id="total"><br></td>
                        </tr>
                     </table>
                  </div>
                  <?php $i=$i+1; }?>
               </div>
            </div>

在第一个图像中，当我单击全选时，它在纸张计数中显示 1，在总和列中显示 10。然后，当我第二次单击全选时，纸张数量以正确的方式增加，但总和列没有变化。我想知道，如何为每个函数编写。我想在单独选择时和通过全选选项选择时对选中的复选框值求和

更新：

我得到了一半的结果：

        $(document).ready(function()
      {  
        $('input[type="checkbox"]').change(function()
      {
               var total=0;
        $(this).parents("tr").children("td").
          find('input[type=checkbox]:checked').each(function(){ 
                total +=parseInt($(this).val());
        $(this).parents('tr').find('input[type=text]:last').val(total);
      });
      });
      });

现在唯一的问题是上面的代码没有对行值求和，当我单击全选时。对于这个问题有什么帮助吗？

更新小提琴

提前致谢

标签： javascriptphpjqueryfunctioncheckbox

解决方案

$(this).parents("tr").children("td").find('input[type=checkbox]:checked')

当您勾选checkall复选框时，它将被此选择器匹配。它没有明确的value集合，因此.val()将返回 string "on"。

显然，字符串"on"不能转换为整数，所以你total会变成NaN.

从您的选择器中排除.checkall复选框，您的代码将起作用。

$(this).parents('tr').find(':checkbox:checked').not(".checkall").each(...

更新的小提琴

注意：您还应该注意jQuery 文档-$(document).ready(fn)自 v3 以来已被弃用。改为使用$(fn)。

编辑：根据您在CodeProject上发布的更新的 Fiddle，您只需在从函数更新它后触发您的复选框事件：changeSelectAll

table.find('td:nth-child(' + columnIndex + ') input').prop("checked", obj.checked).change();

修复了更新的小提琴

javascript - 获取表格每一行的复选框总和

问题描述

解决方案

推荐阅读