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

Z时代
2024-01-10
分类：技术分享

<!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="https://segmentfault.com/q/1010000024507497/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>

回答

 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>