<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
margin:100px auto;
border-spacing: 0;
background-color: #cccccc;
}
td{
100px;
height: 50px;
text-align: center;
background-color: #ff0;
}
</style>
</head>
<body>
<table>
<tr>
<th><input type="checkbox"></th>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function () {
$("th>input").click(function () {
$("tr input").prop("checked",$(this).prop("checked"));
});
$("td input").click(
function () {
var allc = $("td input").length;
var checkedc = $("td input:checked").length;
if(allc == checkedc){
$("th>input").prop("checked",true);
}
else{
$("th>input").prop("checked",false);
}
}
);
});
</script>
</body>
</html>