JavaScript DOM 全选/全不选,反选练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="post"> 你爱好的运动? <input type="checkbox" id="checkedAllBox"/>全选/全不选 <br /> <input type="checkbox" name="items" id="" value="足球" />足球 <input type="checkbox" name="items" id="" value="篮球" />篮球 <input type="checkbox" name="items" id="" value="羽毛球" />羽毛足球 <input type="checkbox" name="items" id="" value="乒乓球" />乒乓球 <br /> <input type="button" name="" id="checkAllBtn" value="全 选" /> <input type="button" name="" id="checkNoBtn" value="全不选" /> <input type="button" name="" id="checkRevBtn" value="反 选" /> <input type="button" name="" id="sendBtn" value="提 交" /> </form> </body> <script type="text/javascript"> //获取4个多选框 name获取 var items=document.getElementsByName("items"); //1.全选 #checkAllBtn var checkAllBtn=document.getElementById("checkAllBtn"); checkAllBtn.onclick=function(){ //遍历 for(i=0;i<items.length;i++){ //设置4个多选框为选中状态 //alert(items[i].checked); items[i].checked=true; } checkedAllBox.checked=true;//吧全选/全不选也带上 }; //2.全不选 #checkNoBtn var checkNoBtn=document.getElementById("checkNoBtn"); checkNoBtn.onclick=function(){ for(i=0;i<items.length;i++){ //设置4个多选框为选中状态 //alert(items[i].checked); items[i].checked=false; } checkedAllBox.checked=false;//吧全选/全不选也带上 }; //3.反选 #checkRevBtn var checkRevBtn=document.getElementById("checkRevBtn"); checkRevBtn.onclick=function(){ for(i=0;i<items.length;i++){ //alert(items[i].checked); //反选 items[i].checked=!items[i].checked; } //反选对checkedAllBox也要有判断4个复选框是否全部选中效果,粘贴了下面那段 //初始化checkedAllBox值,使4个复选框又全部选中时,checkedAllBox为选中 checkedAllBox.checked=true; //判断4个复选框是否全部选中,只要一个没选中,就是没全部选中 for(j=0;j<items.length;j++){ //进入判断了,表示有一个或多个没选中了 if(!items[j].checked){ checkedAllBox.checked=false; //一旦判断,即为全不选了,对j++后面的不用判断了,优化 break; } } }; //4.提交 #sendBtn var sendBtn=document.getElementById("sendBtn"); sendBtn.onclick=function(){ for(i=0;i<items.length;i++){ if(items[i].checked){ //弹出value属性值 alert(items[i].value); } } }; //5.全选/全不选 #checkedAllBox var checkedAllBox=document.getElementById("checkedAllBox"); checkedAllBox.onclick=function(){ //alert("checkedAllBox"); //使4个多选框的勾选与全选/全不选的相同 for(i=0;i<items.length;i++){ //使4个多选框的勾选与全选/全不选的相同 items[i].checked=checkedAllBox.checked; } }; //6.items /* * #checkedAllBox,与4个复选框同步, */ //为4个复选框分别绑定单击函数,单击后#checkedAllBox改变 for(i=0;i<items.length;i++){ items[i].onclick=function(){ //alert('hello'); //初始化checkedAllBox值,使4个复选框又全部选中时,checkedAllBox为选中 checkedAllBox.checked=true; //判断4个复选框是否全部选中,只要一个没选中,就是没全部选中 for(j=0;j<items.length;j++){ //进入判断了,表示有一个或多个没选中了 if(!items[j].checked){ checkedAllBox.checked=false; //一旦判断,即为全不选了,对j++后面的不用判断了,优化 break; } } }; } </script> </html>