通过上期【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例（附源码）再接一个全选小练习。
实现效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
//找到所有元素
var items = document.getElementsByName('item');
//全选和全不选的按钮
var checkAll = document.getElementById('checkAll');
//给全选框添加单击事件函数
document.getElementById('checkAllBtn').onclick = function(){
//找到所有元素
for(var i = 0; i<items.length; i ++){
items[i].checked = true;
}
checkAll.checked = true;
}
//给全不选框添加单击事件函数
document.getElementById('checkAllNoBtn').onclick = function(){
for(var i = 0;i<items.length; i ++){
items[i].checked =false;
}
checkAll.checked = false;
}
//给反选框添加单击事件函数
document.getElementById('checkReBtn').onclick = function(){
checkAll.checked = true;
for(var i = 0;i<items.length;i ++){
if(items[i].checked){
items[i].checked = false;
}else{
items[i].checked = true;
}
if(items[i].checked == false){
checkAll.checked = false;
}
}
}
//给提交按钮添加单击事件函数
document.getElementById('send').onclick = function(){
for(var i = 0;i<items.length;i ++){
if(items[i].checked){
alert(items[i].value)
}
}
}
//给全选/全不选框添加单击事件函数
document.getElementById('checkAll').onclick = function(){
for(var i = 0;i<items.length;i ++){
items[i].checked = this.checked;
}
}
//给items设置单击相应函数
for(var i = 0;i<items.length;i ++){
items[i].onclick = function(){
checkAll.checked = true;
for(var j = 0;j<items.length; j++){
if(items[j].checked == false){
checkAll.checked = false;
break;
}
}
}
}
}
</script>
<style>
div{
width: 350px;
margin: 50 auto;
background-color:lightblue;
text-align: center;
}
</style>
</head>
<body>
<div>
<span>你拥有以下哪些角色？</span>
<input type="checkbox" id="checkAll" value="全选/全不选">全选/全不选<br>
<input type="checkbox" name="item" value="枫原万叶">枫原万叶
<input type="checkbox" name="item" value="可丽">可丽
<input type="checkbox" name="item" value="刻晴">刻晴
<input type="checkbox" name="item" value="魈">魈
<input type="checkbox" name="item" value="钟离">钟离<br>
<input type="button" id="checkAllBtn" value="全选">
<input type="button" id="checkAllNoBtn" value="全不选">
<input type="button" id="checkReBtn" value="反选"><br>
<input type="submit" id="send" value="提交">
</div>
</body>
</html>