<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>全选练习</title> <script type="text/javascript"> 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属性可以来获取或设置多选框的选中状态 //alert(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 var checkedRevBtn = document.getElementById("checkedRevBtn"); checkedRevBtn.onclick = function(){ //将checkedAllBox设置为选中状态 checkedAllBox.checked = true; for(var i=0; i<items.length ; i++){ //判断多选框状态 /*if(items[i].checked){ //证明多选框已选中，则设置为没选中状态 items[i].checked = false; }else{ //证明多选框没选中，则设置为选中状态 items[i].checked = true; }*/ items[i].checked = !items[i].checked; //判断四个多选框是否全选 //只要有一个没选中则就不是全选 if(!items[i].checked){ //一旦进入判断，则证明不是全选状态 //将checkedAllBox设置为没选中状态 checkedAllBox.checked = false; } } //在反选时也需要判断四个多选框是否全都选中 }; /* * 提交按钮： * - 点击按钮以后，将所有选中的多选框的value属性值弹出 */ //4.#sendBtn //为sendBtn绑定单击响应函数 var sendBtn = document.getElementById("sendBtn"); sendBtn.onclick = function(){ //遍历items for(var i=0 ; i<items.length ; i++){ //判断多选框是否选中 if(items[i].checked){ alert(items[i].value); } } }; //5.#checkedAllBox /* * 全选/全不选 多选框 * - 当它选中时，其余的也选中，当它取消时其余的也取消 * * 在事件的响应函数中，响应函数是给谁绑定的this就是谁 */ //为checkedAllBox绑定单击响应函数 checkedAllBox.onclick = function(){ //alert(this === checkedAllBox); //设置多选框的选中状态 for(var i=0; i <items.length ; i++){ items[i].checked = this.checked; } }; //6.items /* * 如果四个多选框全都选中，则checkedAllBox也应该选中 * 如果四个多选框没都选中，则checkedAllBox也不应该选中 */ //为四个多选框分别绑定点击响应函数 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设置为没选中状态 checkedAllBox.checked = false; //一旦进入判断，则已经得出结果，不用再继续执行循环 break; } } }; } }; </script> </head> <body> <form method="post" action=""> 你爱好的运动是？<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>