原始js实现checkbox全选和取消全选

Checkbox 对象
Checkbox 对象代表一个 HTML 表单中的 一个选择框。
在 HTML 文档中 每出现一次，Checkbox 对象就会被创建。

在每个input里都添加Checkbox 对象
1、HTML结构搭建代码

<ul>
	<li><input type="checkbox" name="" id="selectAll" value=""/><span id="pp">全选</span></li>
	<li><input type="checkbox" name="gg" id="" value="" />小狗</li>
	<li><input type="checkbox" name="gg" id="" value="" />小猫</li>
	<li><input type="checkbox" name="gg" id="" value="" />小仓鼠</li>
	<li><input type="checkbox" name="gg" id="" value="" />小老鼠</li>
	<li><input type="checkbox" name="gg" id="" value="" />小兔子</li>
</ul>

2、原生js代码

 window.onload = function () {
  var selectAll = document.getElementById("selectAll");// 获取全选元素
  var ggs = document.getElementsByName("gg");//获取input标签里的checkbox相同名字的集合
  // 全选或者不选的时候 调用此函数
  function ff(flag) {//勾选时flag=true,取消勾选时flag=false                
      //创建 i < input 的条件进行for循环获取input的索引，在条件内i++,不满足条件就结束代码
      for (var i = 0; i < ggs.length; i++) {
          ggs[i].checked = flag;//获取 i 当前条，然后等于传过来的参数
      }
  }
  //全选的点击事件，根据点击的状态调用上面函数
  selectAll.onclick = function () {
      if (selectAll.checked) {//if(selectAll.checked)判断是否勾选
          document.getElementById("pp").innerHTML = '取消全选';
          ff(true);//调用ff(flag)函数，把判断勾选的参数true传过去
      } else {
          document.getElementById("pp").innerHTML = '全选';
          ff(false)//调用ff(flag)函数，把判断勾选的参数false传过去
      }  }  }

3、效果图