利用绑定单击事件以及循环来实现表单的全选和反选案例分析

   全选案例
 1.获取全选复选框的状态：checked状态，它是一个内置属性
 2.获取下面的所有复选框，获取的是一个伪数组，遍历为每一个复选框的checked设置为全选复选框的状态值

  // 1.获取元素
  let checkAll = document.querySelector('#checkAll')  //全选复选框
  let all = document.querySelector('.all') //文字全选
  let cks = document.querySelectorAll('.ck')  // 所有的复选框
  console.log(checkAll, all, cks);

  // 2.绑定单击事件 checkAll
  checkAll.addEventListener('click', function () {
    // 全选框选中状态  赋值给check
    let state = checkAll.checked

    // 3.伪数组不能直接操作  所以需要遍历
    //方法1. 用forEach来做
    // cks.forEach(function (v, i) { //v代表就是数组的元素,i表示的是数组的下标
    //   // 遍历为每一个复选框的checked设置为全选复选框的状态值 = 全选复选框的值
    //   v.checked = state
    // })

    // 方法2. 用for循环来做
    for (let i = 0; i < cks.length; i++) {
      cks[i].checked = state  // 遍历的是子元素 所以需要[i]
    }
    all.innerText = state ? '取消' : '全选'
  })



//选中所有的复选框,全选框也一起选中

//方法1
  for (let i = 0; i < cks.length; i++) {
    //绑定所有复选框的子元素也就是下标去做单击事件
    cks[i].addEventListener('click', function () {
    
      //声明一个变量,让这个数=数组的长度
      let count = document.querySelectorAll('.ck:checked').length 
      if (count == cks.length) {
        //如这个数是=数组长度  则判断所有复选框和全选一起选中,也就是判断全选被选中的状态为真的
        checkAll.checked = true
        all.innerText = '取消'  //渲染到页面
      } else {
        checkAll.checked = false  //否则不等于为假的
        all.innerText = '全选'  //渲染到页面
      }

    })

  }
  
  
  //方法2
    for (let i = 0; i < cks.length; i++) {
    // 需要绑定循环遍历cks[i]里面的元素  看看 cks的元素是否等于 3  如果等于 那么就等于all
    cks[i].addEventListener('click', function () {
      let count = 0  //先声明一个值  表示数组=0开始
      cks.forEach(function (v, i) { //不能直接操作数组,需要遍历数组
        if (v.checked == true) {   //判断让数组全部元素都有选上,如果选上就+1
          count++
        }
      })
      if (count == cks.length) { //判断这个数==数组长度   复选框的数量，与总数进行比较
        checkAll.checked = true  //如果是的真的话,那么表示多选框全部选中后也会选中 全部的复选框
        all.innerText = `取消`

      } else {
        checkAll.checked = false //否则就是假的
        all.innerText = `全选`
      }

    })

  }