通过上期【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>
