需求
- 制作如下可選表格，實現“全選”、“反選”、“取消”功能
代碼示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!--告訴IE以最高級模式渲染文檔-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>作業分解</title>
<script>
function checkAll() {
//全選，找到所有的checkbox，全部選中
var checkboxEles = document.getElementsByClassName("c1");
for (var i=0;i<checkboxEles.length;i++){
checkboxEles[i].checked=true;
}
}
function reverse() {
//反選--找標簽，判斷
//1.找標簽（和上面一樣）
var checkboxEles = document.getElementsByClassName('c1');
//2.判斷每個選框checkboxEles[i].checked 屬性是true還是false
//如果是true改為false；如果是false改為true
// for循環+if判斷 實現反選
// for (var i=0;i<checkboxEles.length;i++){
// if (checkboxEles[i].checked=true){
// checkboxEles[i].checked=false;
// }else {
// checkboxEles[i].checked=true;
// }
// }
// 取反，實現反選
for (var i=0;i<checkboxEles.length;i++){
checkboxEles[i].checked=!checkboxEles[i].checked;
}
}
function cancleAll() {
//取消選中
var checkboxEles = document.getElementsByClassName("c1");
for (var i=0;i<checkboxEles.length;i++){
checkboxEles[i].checked=false;
}
}
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>技師姓名</th>
<th>出生年份</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="c1" type="checkbox"></td>
<td>張三</td>
<td>10年</td>
</tr>
<tr>
<td><input class="c1" type="checkbox"></td>
<td>李四</td>
<td>98年</td>
</tr>
<tr>
<td><input class="c1" type="checkbox"></td>
<td>王五</td>
<td>99年</td>
</tr>
<tr>
<td><input class="c1" type="checkbox"></td>
<td>趙六</td>
<td>97年</td>
</tr>
</tbody>
</table>
<br>
<input type="button" value="全選" onclick="checkAll()">
<input type="button" value="反選" onclick="reverse()">
<input type="button" value="取消" onclick="cancleAll()">
</body>
</html>
“反選”測試
“全選”測試
“取消”測試
此種實現方法為 JS ；
亦可用 jQuery 實現，更加簡潔高效。