简单实现复选框的全选和反选功能---JS

简单实现全选和全不选功能

一.效果图

二.需求分析
1.当我们点击全选的时候，要实现下方5个选项全部✔，并且“全选”，变成“不全选”；
2.当我们点击反选的时候，要实现未勾选的选项可以自动✔，已✔的选项撤销✔；
3.当我们一个个将下方5个选项✔完，要实现“全选”被✔，并且“全选”变成“不全选”

三.JS部分代码分析实现

1.获取元素

  <dt>
        <input type="checkbox" id="checkAll">
        <label for="checkAll">全选</label>
        <a href="#">反选</a>
    </dt>
    根据以上界面设计，我们知道，在js中，我们首先要获取到以上input,label,a三个元素；
    所以，有如下代码：
    // 获取所有input标签
    var inputs = document.querySelectorAll('input');
    // 找到a,获取反选按钮
    var a = document.querySelector('a');
    //获取全选和全不选的label标签
    var label = document.querySelector('dt label');

2.实现全选按钮点击事件

• 首先找到全选为inputs[0],设计它的点击事件，利用一个for循环去遍历5个inputs，只要当前事件即全选inputs[0]被勾选，则将其勾选状态赋予它下方的5个选框。然后，利用一个三目运算，来判断实现，如果当前事件被点击发生，那么就将label的内容变成‘全不选’，否则变为‘全选’

  inputs[0].onclick = function(){
       //i从1开始，因为第一个全选已经选中
       for(var i=1;i<inputs.length;i++){
           inputs[i].checked=this.checked; 
       } 
       label.innerText = this.checked ?'全不选':'全选'
   }
  

3.实现反选按钮点击事件

• 首先给反选a标签设计一个点击事件，同样是利用一个for循环，把未✔的选框的状态赋给已打勾的选框，实现状态互换

    a.onclick = function(){
      for(var i = 1;i<inputs.length;i++){
   		                inputs[i].checked = !inputs[i].checked;
   		            }
   		            isCheckAll();//该函数用于监听是否全选，详细请看第4点
   		        }
  

4.封装一个监听是否全选的函数

• 根据需求分析第3点，我们要累计被勾选的选框个数，当个数达到inputs.length的长度也就是5的时候，让全选框被✔，并且内容变成‘不全选’

   	function isCheckAll(){
       var checkCount = 0;
       for(var i=1;i<inputs.length;i++){
           //A&&B 只有a的值是true的时候，才会执行b的运算
           inputs[i].checked && checkCount++;
       }
       inputs[0].checked = checkCount == inputs.length - 1;
       label.innerText =  inputs[0].checked ?'全不选':'全选'
       }
  

5.点击下面5个选框时调用函数

• 当我们点击下方选框的时候，调用监听函数，监听是否已经全选

     for(i=1;i<inputs.length;i++){
       inputs[i].onclick = function(){
           //调用监听是否全选的函数
           isCheckAll()
       }
   }