版权声明：转载本文，请附录原文地址，如果错误，请联系我。 https://blog.csdn.net/qq_19880197/article/details/86673769
HTML
<body>
<div class="wrap"></div>
<table>
<thead>
<tr>
<td>
<input type="checkbox" id="j_cbAll">
</td>
<td>菜名</td>
<td>饭点</td>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" name="" >
</td>
<td>红烧肉</td>
<td>红烧肉</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" >
</td>
<td>红烧肉</td>
<td>红烧肉</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" >
</td>
<td>红烧肉</td>
<td>红烧肉</td>
</tr>
</tbody>
</table>CSS
table{
margin: 100px auto;
width: 270px;
height: 80px;
}
table,tr{
border: 1px solid black;
}
thead{
background-color: cornflowerblue;
font-size: 16px;
color: #fff;
font-weight: 700;
}
thead,tbody{
text-align: center;
width: 270px;
height: 20px;
line-height: 20px;
}
tbody{
background-color: #ccc;
}
jQuery
<script src="jQuery/jquery-1.12.3.js"></script>
<script>
$(function () {
$("#j_cbAll").click(function () {
$("#j_tb input").prop("checked",$(this).prop("checked"));
$("#j_tb input").click(function () {
var allLength=$("#j_tb input").length;
var checkedLength=$("#j_tb input:checked").length;
if(allLength==checkedLength){
$("#j_cbAll").prop("checked",true);
}else {
$("#j_cbAll").prop("checked",false);
}
});
});
});
</script>