该效果是JQ代码,所以在实现前,请自己手动引入JQ插件;
效果图
1.css代码
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid red;
padding: 10px;
text-align: center;
}
2.html代码
<table>
<tr>
<th>
<input type="checkbox" id="check_all" />
</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>赵四</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>王五</td>
<td>女</td>
<td>17</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>聂把</td>
<td>男</td>
<td>19</td>
</tr>
</table>
js代码
<script>
$(function() {
// 全选或者全不选
$("#check_all").on("click", function() {
var flag = $(this).prop("checked");
$("td input[type='checkbox'").prop("checked", flag);
});
//当子元素手动全选时,全选按钮自动选择,如果子元素有一个时未选择装填,则全选按钮不选中
$("td input[type='checkbox'").on("click", function() {
var flag = $(this).prop("checked");
$("td input[type='checkbox'").each(function(index, ele) {
//遍历所有的复选框,如果有一个复选框时未选中状态,就结束循环,全选按钮不选中
if ($(ele).prop("checked")) {
flag = true;
$("#check_all").prop("checked", flag);
} else {
flag = false;
$("#check_all").prop("checked", flag);
return false;
}
});
});
});
</script>