页面上有10个多选框,实现三个按钮(重置、反选、全选)功能
1 <body> 2 <br/> 3 <button id="reset">重置</button> <button id="invert">反选</button> <button id="all">全选</button><br/> 4 <br/> 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"> 15 <script> 16 var reset=document.getElementById('reset'); 17 var invert=document.getElementById('invert'); 18 var all=document.getElementById('all'); 19 var checkBox=document.getElementsByTagName('input'); 20 reset.addEventListener('click',function () { 21 for(var i=0;i<checkBox.length;i++){ 22 checkBox[i].checked=false; 23 } 24 }); 25 invert.addEventListener('click',function () { 26 for(var i=0;i<checkBox.length;i++){ 27 checkBox[i].checked=!checkBox[i].checked; 28 } 29 }); 30 all.addEventListener('click',function () { 31 for(var i=0;i<checkBox.length;i++){ 32 checkBox[i].checked=true; 33 } 34 }) 35 </script> 36 </body>