JS小练习之实现全选、不选、反选

<!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

JS小练习之实现全选、不选、反选

猜你喜欢