<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全选框</title>
</head>
<style>
table{
font-size: 16px;
width: 400px;
margin: 100px auto 0;
text-align: center;
}
table,tr,td{
border: 1px solid #CCC;
border-collapse: collapse;
}
tr{
height: 30px;
}
tr:hover{
background-color:#0f0;
}
thead tr:first-child,thead tr:first-child:hover{
background-color: #ff55ff;
font-style: normal;
font-weight: 600;
}
</style>
<body>
<table>
<thead>
<tr>
<td><input type="checkbox" class="all"></td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>12</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>13</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>14</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵六</td>
<td>15</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>卢奇</td>
<td>16</td>
</tr>
</tbody>
</table>
</body>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(function () {
var cheAll = $(".all");
var ches = $("tbody :checkbox");
cheAll.on("click", function () {
ches.prop("checked", $(this).prop("checked"));
})
ches.on("click", function () {
cheAll.prop("checked", $(this).filter(":checked").length == $(this).length);
});
})
</script>
</html>
效果图