1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript"> 8 window.onload=function(){ 9 var b01=document.getElementById("checkedAll"); 10 var a=document.getElementsByName("items"); 11 var checkAllBox=document.getElementById("checkAllBox"); 12 b01.onclick=function(){ 13 /* 14 设置四个多选框变成选中状态 15 通过多选框的checked属性可以来获取多选框的选中状态 16 alert(a[i].checked); 17 */ 18 for(var i=0;i<a.length;i++) 19 { 20 a[i].checked=true; 21 } 22 checkedAllBox.checked=true; 23 24 }; 25 var b02=document.getElementById("notChecked"); 26 b02.onclick=function(){ 27 for(var i=0;i<a.length;i++){ 28 a[i].checked=false; 29 } 30 31 }; 32 var b03=document.getElementById("checkedReverse"); 33 b03.onclick=function(){ 34 for(var i=0;i<a.length;i++) 35 a[i].checked=!a[i].checked; 36 }; 37 /* 38 提交按钮 39 点击按钮，将所有选中的多选框的value属性值弹出 40 为sent绑定单击响应函数 41 */ 42 var send=document.getElementById("sent"); 43 sent.onclick=function(){ 44 for(var i=0;i<a.length;i++){ 45 if(a[i].checked) 46 alert(a[i].value); 47 } 48 }; 49 /* 50 全选/全不选多选框 51 当它选中时，其余的也选中，当它取消时其余的也取消 52 在响应函数中，响应函数是给谁绑定的，this就是谁 53 */ 54 //为checkedAllBox绑定响应函数 55 checkAllBox.onclick=function(){ 56 var flag=this.checked; 57 for(var i=0;i<a.length;i++){ 58 a[i].checked=flag; 59 } 60 } 61 /* 62 如果四个多选框全都选中，则checkAllBox也应该选中 63 如果四个多选框没都选中，则checkAllBox也不应该选中 64 为四个多选框分别绑定单击响应函数 65 */ 66 for(var i=0;i<a.length;i++) 67 { 68 a[i].onclick=function(){ 69 checkAllBox.checked=true; 70 for(var j=0;j<a.length;j++){ 71 if(!a[j].checked){ 72 checkAllBox.checked=false; 73 break; 74 } 75 } 76 } 77 78 } 79 }; 80 </script> 81 82 <body> 83 <!-- 84 parentNode 表示当前节点的父节点 85 previousSibling 表示当前节点的前一个兄弟节点(可以获取到空白的文本) 86 previousElementSibling 获取前一个兄弟元素 ie8及以下不支持 87 nextSibling 表示当前节点的后一个兄弟节点 88 --> 89 <form method="post" action=""> 90 你爱好的运动是？<input type="checkbox" id="checkAllBox"/>全选、全不选 91 <br/> 92 <input type="checkbox" name="items" value="football">football 93 <input type="checkbox" name="items" value="basketball">basketball 94 <input type="checkbox" name="items" value="baseball">baseball 95 <br/> 96 <input type="button" id="checkedAll" value="全 选"/> 97 <input type="button" id="notChecked" value="全不选"/> 98 <input type="button" id="checkedReverse" value="反选"/> 99 <input type="button" id="sent" value="提交"/> 100 </form> 101 </body> 102 </html>