js复选框全选案例

202 阅读1分钟

实现效果

实现点击选中全选复选框时,其他复选框的选择状态都为选中状态,
取消全选复选框的选中状态时,其他复选框的选中状态也取消。

image.png

实现思路

1.获取全选复选框的对象 2.获取子选项复选框对象 3.监听全选框的点击事件 4.获取全选框的选中状态checked 5.将全选框的选中状态值赋给全部子选项复选框的checked

代码实现

``//获取全选框对象
   let chkAll = document.querySelector(".chkAll")
   //获取全部子选项复选框对象
   let chkList = document.querySelectorAll("div input")
   //监听全选框点击事件
    chkAll.addEventListener("click",function(){
      //将全选框的选中状态值通过遍历赋给所有子选项复选框
      let state = chkAll.checked
      for (let i = 0; i < chkList.length; i++) {
        chkList[i].checked = state
      }
  })