菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 蒋鹏冲-20221108-DOM02 [打印本页]

作者: 北纬33 时间: 2022-11-9 00:25
标题: 蒋鹏冲-20221108-DOM02
一，今日学习内容：
1.<!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>
<form action="">
      <div>
         <input type="checkbox" id="al">全选
      </div>
      <div>
         <input type="checkbox" class="check">1
         <input type="checkbox" class="check">2
         <input type="checkbox" class="check">3
         <input type="checkbox" class="check">4
         <input type="checkbox" class="check">5
         <input type="checkbox" class="check">6
         <input type="checkbox" class="check">7
         <input type="checkbox" class="check">8
      </div>
      <input type="button" id="btn" value="反选">
</form>

<script>
      const al = document.querySelector('#al');
      const check = document.querySelectorAll('.check');
      const btn = document.querySelector('#btn');

      // let flag = true;
      // 全选
      console.log(check.length)
      let cout = 0;
      al.addEventListener('click', function () {
         if (al.checked == true) {
            check.forEach(function (v) {
                  if (v.checked == false) {
                     v.checked = true;
                     cout++;
                  }
            })
            console.log(cout);
         } else if (al.checked == false) {
            check.forEach(function (v) {
                  if (v.checked == true) {
                     v.checked = false;
                     cout--;
                  }
            })
         }
         check.forEach(function (v) {

         })
      })
      check.forEach(function (v) {
         v.addEventListener('click', function () {
            if (v.checked == false) {
                  al.checked = false;
                  cout--;
            } else {
                  cout++;
            }
            console.log(cout);
            if (cout == check.length) {
                  al.checked = true;
            }
         })
      })

      // 反选
      btn.addEventListener('click', function () {
         check.forEach(function (v, i) {
            if (v.checked == true) {
                  v.checked = false;
                  al.checked = false;
                  cout--;
            } else if (v.checked == false) {
                  v.checked = true;
                  cout++;
            }
         })
         if (cout == 8) {
            al.checked = true;
         }
      })
</script>

</body>

</html>

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)