<?
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" id="j_cbAll"></th>
<th>第一行</th>
<th>第二行</th>
</tr>
<tbody id="j_tb">
<tr>
<td><input type="checkbox"></td>
<td>hang1</td>
<td>hang11</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>hang2</td>
<td>hang22</td>
</tr>
</tbody>
</table>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function () {
var $j_cbAll = $('#j_cbAll'),
j_cbAll = $j_cbAll[0],
$tb = $('#j_tb'),
$cbs = $tb.find(':checkbox'),
cbslen = $cbs.length;
$j_cbAll.click(function () {
var i = 0;
if (this.checked === true) {
for (; i < cbslen; i++) {
$cbs[i].checked = true;
}
} else {
for (; i < cbslen; i++) {
$cbs[i].checked = false;
}
}
});
$cbs.click(function () {
var $selcblen = $tb.find(":checkbox:checked");
$selcblen.length === cbslen ? j_cbAll.checked = true : j_cbAll.checked = false;
})
})
</script>
</body>
</html>