<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // onload事件在整个页面加载完执行 window.onload=function(){ // 获取四个多选框items (全局定义) var items = document.getElementsByName("items"); // 获取全选/全不选的多选框 var checkedAllBox = document.getElementById("checkedAllBox"); // ---------------------------------------全选中事件------------------------------------------------------------- // 1.checkedAllBtn // 为id为checkedAllBtn的按钮绑定一个单击响应函数 var checkedAllBtn=document.getElementById("checkedAllBtn"); checkedAllBtn.onclick=function(){ // 遍历items for(var i=0;i<items.length;i++){ // 通过多选框的checked属性可以来获取或设置多选框的选中状态 // console.log(items[i].checked); // 设置四个多选框变成选中状态 items[i].checked=true; checkedAllBox.checked=true; } }; // ---------------------------------------全不选事件------------------------------------------------------------- // 2.checkedNoBtn //为id为checkedNoBtn的按钮绑定一个单击响应函数 var checkedNoBtn=document.getElementById("checkedNoBtn"); checkedNoBtn.onclick=function(){ for(var i=0;i<items.length;i++){ //将四个多选框设置为没选中的状态 items[i].checked=false; } // 将全选/全不选设置为不选中 checkedAllBox.checked=false; }; // ---------------------------------------反选事件------------------------------------------------------------- // 3.checkedRevBtn //为id为checkedNoBtn的按钮绑定一个单击响应函数 var checkedRevBtn = document.getElementById("checkedRevBtn"); checkedRevBtn.onclick=function(){ checkedAllBox.checked = true; for(var i=0;i<items.length;i++){ // 将checkAllBox设置为选中状态 //第一种方法：判断多选框状态 /* if(items[i].checked){ items[i].checked=false; }else{ // 证明多选框没选中，则设置为选中状态 items[i].checked=true; } */ //第二种方法： items[i].checked=!items[i].checked; //判断四个多选框是否全选 // 只要有一个没选中则就不是全选 if (!items[i].checked) { checkedAllBox.checked = false; } } // 在反选时也需要判断四个多选框是否全都选中 }; // --------------------------------------提交按钮事件------------------------------------------------------------- // 4.sendBtn //为id为sendBtn的按钮绑定一个单击响应函数 var sendBtn = document.getElementById("sendBtn"); sendBtn.onclick = function () { for(var i=0;i<items.length;i++){ // 判断多选框是否被选中 if(items[i].checked){ console.log(items[i].value); } } }; // --------------------------------------全选/全不选事件---------------------------------------------------------- // 5.checkedAllBox /* 全选/全不选 多选框 -当它选中时，其余的也选中，当它取消时其余也取消 在事件的响应函数中，响应函数是给谁绑定的this就是谁的 */ //为id为checkedAllBox的按钮绑定一个单击响应函数 var checkedAllBox = document.getElementById("checkedAllBox"); checkedAllBox.onclick = function () { // console.log(this===checkedAllBox); // 设置多选框的选中状态 for (var i = 0; i < items.length; i++) { items[i].checked=checkedAllBox.checked; } }; // --------------------------------------items事件---------------------------------------------------------- // 6.items // var checkedAllBox = document.getElementById("checkedAllBox"); /* 如果四个多选框全都选中，则checkAllBox也应该选中 如果四个多选框没豆选中，则checkAllBox也不应该选中 */ // 为四个多选框分别绑定点击响应函数 for(var i=0;i<items.length;i++){ items[i].onclick=function(){ //将checkedAllBox设置为选中状态 checkedAllBox.checked=true; for(var j=0;j<items.length;j++){ //判断四个多选框是否全选 // 只要有一个没选中则就不是全选 if(!items[j].checked){ checkedAllBox.checked=false; // 一旦进入判断，则已经得出接轨们不用再继续执行循环 break; } } } } }; </script> </head> <body> <form action="" method="post"> 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 <input type="checkbox" name="items" value="排球"/>排球 <br/> <input type="button" id="checkedAllBtn" value="全 选"/> <input type="button" id="checkedNoBtn" value="全不选"/> <input type="button" id="checkedRevBtn" value="反选"/> <input type="button" id="sendBtn" value="提交"/> </form> </body> </html>
1、全选事件
2、全不选事件
3、反选事件
选中足球--->单击反选按钮
4、提交按钮事件
5、四个多选框全选中--->全选/全不选自动选中
