思路:1、獲取元素。2、用for循環歷遍數組,把checkbox的checked設置為true即實現全選,把checkbox的checked設置為false即實現不選。3、通過if判斷,如果checked為true選中狀態的,就把checked設為false不選狀態,如果checked為false不選狀態的,就把checked設為true選中狀態。
JS代碼:
1 <script> 2 window.onload=function(){ 3 var CheckAll=document.getElementById('All'); 4 var UnCheck=document.getElementById('uncheck'); 5 var OtherCheck=document.getElementById('othercheck'); 6 var div=document.getElementById('div'); 7 var CheckBox=div.getElementsByTagName('input'); 8 CheckAll.onclick=function(){ 9 for(i=0;i<CheckBox.length;i++){ 10 CheckBox[i].checked=true; 11 }; 12 }; 13 UnCheck.onclick=function(){ 14 for(i=0;i<CheckBox.length;i++){ 15 CheckBox[i].checked=false; 16 }; 17 }; 18 othercheck.onclick=function(){ 19 for(i=0;i<CheckBox.length;i++){ 20 if(CheckBox[i].checked==true){ 21 CheckBox[i].checked=false; 22 } 23 else{ 24 CheckBox[i].checked=true 25 } 26 27 }; 28 }; 29 }; 30 </script>
HTML代碼:
1 全選:<input type="button" id="All" value="全選" /><br /> 2 不選<input type="button" id="uncheck" value="不選" /><br /> 3 反選<input type="button" id="othercheck" value="反選" /><br /> 4 <div id="div"> 5 <input type="checkbox" /><br /> 6 <input type="checkbox" /><br /> 7 <input type="checkbox" /><br /> 8 <input type="checkbox" /><br /> 9 <input type="checkbox" /><br /> 10 <input type="checkbox" /><br /> 11 <input type="checkbox" /><br /> 12 <input type="checkbox" /><br /> 13 <input type="checkbox" /><br /> 14 <input type="checkbox" /><br /> 15 <input type="checkbox" /><br /> 16 <input type="checkbox" /><br /> 17 <input type="checkbox" /><br /> 18 <input type="checkbox" /><br /> 19 <input type="checkbox" /><br /> 20 <input type="checkbox" /><br /> 21 <input type="checkbox" /><br /> 22 <input type="checkbox" /><br /> 23 <input type="checkbox" /><br /> 24 <input type="checkbox" /><br /> 25 </div>