请问table中,td的复选框全部勾选后,th中input框怎么也选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .bgRed{
        background-color: #b2dba1;
    }
</style>
<body>
<table>
    <thead>
    <tr>
        <th><input type="checkbox" id="checkAll"> 序号</th>
        <th>所属机构</th>
        <th>姓名</th>
        <th>手机号码</th>
    </tr>
    </thead>
    <tbody>
    <td ><input type="checkbox" name="_dataCheckBox">1</td>
    <td>山东</td>
    <td>张三</td>
    <td>15689547865</td>
    </tr>
    <tr>
        <td ><input type="checkbox" name="_dataCheckBox">2</td>
        <td>山东</td>
        <td>张三</td>
        <td>15689547865</td>
    </tr>
    </tbody>
</table>
<!--//其他行通过js中的appendto动态添加-->
</body>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script>
    $("tbody tr").each(function(){
        var _this = this;
        $(this).children().slice(1).click(function(){//关键,过滤复选框所在的td的点击事件冲突
            $($(_this).children()[0]).children().each(function(){
                if(this.type=="checkbox"){
                    if(!this.checked){
                        this.checked = true;
                        $(_this).addClass("bgRed")
                    }else{
                        this.checked = false;
                        $(_this).removeClass("bgRed")
                    }
                }
            });
        });
    });
    
</script>
</html>

image.png

阅读 256
评论
    3 个回答
    • 218
     let num = $("tbody tr input").length;
    
     $("tbody tr input").on('click', function () {
    
     if ($("tbody tr input:checked").length == num) {
    
     $("thead tr input").prop("checked", true)
    
     } else {
    
     $("thead tr input").prop("checked", false)
    
     }
    
     })
    
     $("thead tr input").click(function () {
    
     $("tbody tr input").prop("checked", $(this).prop("checked"))
    
     })
      • 310
      <script>
      var checkedArr = [];
      var allChecked = false;
      $('tbody tr').each(function(index){
          checkedArr.push(false)
      });
      
      $('tbody tr').on('click', '[type="checkbox"]', function(){
          var isChecked = $(this).is(":checked");
          var tr = $(this).parent().parent();
          $(this).attr("checked", isChecked ? '' : true);
          checkedArr[tr.index()] = isChecked;
          for (var i = 0; i < checkedArr.length; i++) {
              if(checkedArr[i] === false) {
                  allChecked = false;
                  break;
              }
              allChecked = true;
          }
          $('#checkAll').prop("checked", allChecked ? true : false);
      
      })
      
      </script>

        复制你的代码,选中下面两个,th中的checkbok没有选中。你的什么情况?

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章