<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>全选、不选、反选</title> <style> </style> </head> <body> <input type="button" id="btn1" value="全选"> <input type="button" id="btn2" value="不选"> <input type="button" id="btn3" value="反选"><br> <div id='wrapper'> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> </div> </body> <script type="text/javascript"> var wra=document.getElementById('wrapper'); var inp = wra.getElementsByTagName('input'); var oBtn1=document.getElementById('btn1'); var oBtn2=document.getElementById('btn2'); var oBtn3=document.getElementById('btn3'); oBtn1.onclick=function(){ //实现全选 var i=0; while(i<inp.length){ inp[i].checked=true; i=i+1; } }; oBtn2.onclick=function(){ //实现全不选 var i=0; while(i<inp.length){ inp[i].checked=false; i=i+1; } }; oBtn3.onclick=function(){ //实现反选 for(var i=0;i<inp.length;i++){ if(inp[i].checked==true){ inp[i].checked=false; } else { inp[i].checked=true; } } }; </script> </html>
这次的小练习实现的主要是面对一大串的选择框时,如何实现一键全选、全不选以及实现反选功能;
这里主要新增的一个知识点是:
因为document.getElementByTagName("input")会选中页面中所有的input标签,但是我只想选中其中的一部分怎么办,这里提供的一个思路是把你想要选择的input用一个div框起来,然后像上面两行代码一样,为你想要选中的标签加一个限制条件
还有一个知识点就是关于input:
当type=checkbox时,就会出来一个选择框的效果
当type=button时,就会出来一个按钮的效果,value的值是按钮上的字
当type=text时,就是一个输入框的效果
这里附上一篇对input的各种属性讲解的十分详细的博文:https://www.cnblogs.com/XYQ-208910/p/5831497.html