<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10px" id="table_type">
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>家庭住址</th>
</tr>
<tr>
<td><input type="checkbox" name="stu" id="" value="nan" /></td>
<td>张三1</td>
<td>男</td>
<td>19</td>
<td>龙岩市</td>
</tr>
<tr>
<td><input type="checkbox" name="stu" id="" value="nv" /></td>
<td>张三2</td>
<td>女</td>
<td>19</td>
<td>龙岩市</td>
</tr>
<tr>
<td><input type="checkbox" name="stu" id="" value="nan" /></td>
<td>张三3</td>
<td>男</td>
<td>19</td>
<td>龙岩市</td>
</tr>
<tr>
<td><input type="checkbox" name="stu" id="" value="nv" /></td>
<td>张三3</td>
<td>女</td>
<td>19</td>
<td>龙岩市</td>
</tr>
</table>
<td><input type="checkbox" name="" id="checkbox_all" value="" onclick="dooclick()"/></td>全选
<td><input type="checkbox" name="" id="checkbox_nan" value="" onclick="dooclick_nan()"/></td>全选男
<td><input type="checkbox" name="" id="checkbox_nv" value="" onclick="dooclick_nv()"/></td>全选女
</body>
<script type="text/javascript">
var table_type = document.getElementById('table_type')
var input_all = table_type.getElementsByTagName('input')
var checkbox_all = document.getElementById('checkbox_all')
var checkbox_nan = document.getElementById('checkbox_nan')
var checkbox_nv = document.getElementById('checkbox_nv')
console.log(input_all[0].value)
function dooclick(){
for (var i = 0; i < input_all.length; i++) {
input_all[i].checked = checkbox_all.checked
}
}
function dooclick_nan(){
for (var i = 0; i < input_all.length; i++) {
if(input_all[i].value == 'nan'){
input_all[i].checked = checkbox_nan.checked
}
}
}
function dooclick_nv(){
for (var i = 0; i < input_all.length; i++) {
if(input_all[i].value == 'nv'){
input_all[i].checked = checkbox_nv.checked
}
}
}
</script>
</html>
页面效果: