复选框的全选与反选可能有点low，大佬勿喷

最新推荐文章于 2024-07-25 07:49:46 发布

Hello World

最新推荐文章于 2024-07-25 07:49:46 发布

阅读量93

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_44346550/article/details/125712955

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

复选框的全选与反选

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div style="width: 100px; ">
    <input class="big" type="checkbox">
    <div>
      <input class="ck" type="checkbox">
      <input class="ck" type="checkbox">
      <input class="ck" type="checkbox">
    </div>

  </div>

  <script>
    let bigcheck = document.querySelector('.big')
    let check = document.querySelectorAll('.ck')

    bigcheck.addEventListener('click', function(){
      // 因为拿到的是数组，所以需要循环遍历
      for(let i = 0; i < check.length; i++) {
        check[i].checked = bigcheck.checked
      }
    })

    for(let i = 0; i < check.length; i++){

      check[i].addEventListener('click', function(){
        for(let j = 0; j < check.length; j++){
          if(check[j].checked == false){
            bigcheck.checked = false
            return
          }
        }
        bigcheck.checked = true
      })
    }
  </script>
</body>

</html>