请问怎么实现tbody全部勾选后,thead的复选框也勾选

image.png

<!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>
阅读 151
评论
    0 个回答
    撰写回答

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

    相似问题
    推荐文章