效果展示
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th><input type="checkbox" onclick="selectedAll(this,'selected_item');" /></th>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="checkbox" class="selected_item"></td>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>15</td>
</tr>
<tr>
<td><input type="checkbox" class="selected_item"></td>
<td>2</td>
<td>李四</td>
<td>女</td>
<td>25</td>
</tr>
<tr>
<td><input type="checkbox" class="selected_item"></td>
<td>3</td>
<td>王五</td>
<td>男</td>
<td>19</td>
</tr>
</table>
<script type="text/javascript">
// 实现已选课程复选框checkbox全选与反全选
/**
* @ all 指的是要实现全选的复选框
* @ tdClassName 指的是td中的input复选框的类名
*/
function selectedAll(all, tdClassName) {
var items = document.getElementsByClassName(tdClassName);
if (all.checked == true) {
for (var i = 0; i < items.length; i++) {
items[i].checked = true;
}
} else {
for (var j = 0; j < items.length; j++) {
if ((items[j]).checked == false) {
items[j].checked = true;
} else {
items[j].checked = false;
}
}
}
}
</script>
</body>
</html>
