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

Reset
  • 24
<!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

回复
阅读 1.9k
3 个回答
落叶
  • 329
 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"))

 })
<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没有选中。你的什么情况?

宣传栏