有趣的装置
<html>
<table ___________①______________>
<thead>
<th>全选____②___<input type="checkbox" id="all_check" ___________③______________/> </th>
<th>部門</th><th>名前</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="rowCheck" __________④_______________/></td>
<td>開発1部</td>
<td>田中</td>
</tr>
<tr>
<td><input type="checkbox" name="rowCheck" ___________⑤______________/></td>
<td>開発2部</td><td>佐藤</td>
</tr>
<tr>
<td><input type="checkbox" name="rowCheck" ___________⑥______________/></td>
<td>開発2部</td><td>田島</td>
</tr>
</tbody>
</table>
<script>
___________⑦______________
</script>
</html>
请补全上方JS部分代码,实现以下效果及功能。
JS功能:
①当勾选全选复选框时,下方所有复选框全部勾选。取消勾选全选复选框时,下方所有复选框全部取消勾选。
②当下方复选框全都勾选时,勾选全选复选框。当下方复选框任意一个未勾选时,取消勾选全选复选框。
结果:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<!-- ①_设置边框 宽度 表格页面居中 -->
<table border="1px" width="900" align="center">
<thead>
<!-- _② 全选文字 换行复选框 -->
<th>全选 <br><input type="checkbox" id="all_check" onclick="checkAll()"/></th>
<!-- ③ 使用onclick事件处理属性,赋予全选复选框功能,点击触发checkAll函数 -->
<th>部門</th>
<th>名前</th>
</thead>
<tbody align="center">
<tr><!--④ 表格主体第一行第一列,包含一个复选框,使用onclick事件处理属性,赋予复选框检查功能,点击触发checkCheckBoxes函数-->
<td><input type="checkbox" name="rowCheck" onclick="checkCheckBoxes()"/></td>
<td>開発1部</td>
<td>田中</td>
</tr>
<tr><!--⑤ 表格主体第二行第一列,包含一个复选框,使用onclick事件处理属性,赋予复选框检查功能,点击触发checkCheckBoxes函数-->
<td><input type="checkbox" name="rowCheck" onclick="checkCheckBoxes()"/></td>
<td>開発2部</td>
<td>佐藤</td>
</tr>
<tr><!--⑥ 表格主体第三行第一列,包含一个复选框,使用onclick事件处理属性,赋予复选框检查功能,点击触发checkCheckBoxes函数-->
<td><input type="checkbox" name="rowCheck" onclick="checkCheckBoxes()"/></td>
<td>開発2部</td>
<td>田島</td>
</tr>
</tbody>
</table>
<!-- JS代码部分 -->
<script>
// 通过给定id = all_check获取全选复选框的引用
var all_check = document.getElementById("all_check");
// 通过给定name = rowCheck表格主体多个复选框的引用
var checkBoxes = document.getElementsByName("rowCheck");
// JS功能:①
// 当点击全选复选框时调用此checkAll函数 触发全选功能
function checkAll() {
// 遍历所有var checkBoxes的复选框,将全选复选框的checked属性值逐一赋值给var checkBoxes内每一个checked属性
//实现全选和全不选的JS功能:①
for (var i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].checked = all_check.checked;
}
}
// JS功能:②
// 当点击下方复选框时调用此函数
function checkCheckBoxes() {
var allChecked = true;//预设布尔开关为true
// 遍历所有var checkBoxes的复选框,逐一检查是否有未勾选的复选框
for (var i = 0; i < checkBoxes.length; i++) {
//使用非门,判断存在未选中checked则记录布尔开关为false
if (!checkBoxes[i].checked) {
allChecked = false;
break;
//跳出for循环
}
}
// 将检查后记录的allChecked值赋予给id=all_check的全选复选框的checked属性,实现判断否勾选全选复选框勾选的功能
all_check.checked = allChecked;
}
</script>
</html>