javascript实现复选框全选/全不选/反选

涛涛码代码

已于 2022-10-27 12:09:24 修改

阅读量256

点赞数

文章标签： javascript 前端 html

于 2022-10-27 11:41:47 首次发布

本文链接：https://blog.csdn.net/qq_44443071/article/details/127549306

版权

<!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>
    <p>请选择你的爱好</p>
    <label > 
      <input type="checkbox"  id="a1">全选/全不选
    </label>
<!-- lable 表示点文字也可以选中复选框 -->
    <div id="b1">
    <label>
      <input type="checkbox" class="play"  >打篮球
    </label>
    <label>
      <input type="checkbox" class="play" >踢足球
    </label>
    <label >
       <input type="checkbox" class="play" >上网
    </label>
   <label >
    <input type="checkbox" class="play" >打排球
   </label>
    <label >
      <input type="checkbox" class="play" >打游戏
    </label>
    <label >
      <input type="checkbox" class="play" >滑板
    </label>
    
   </div>
    <br>
    <button id="a3" onclick="setAll()">全选</button>
    <button id="a4" onclick="setNo()">全不选</button>
    <button id="a5" onclick="other()">反选</button>

    <script>
        var a1 = document.getElementById('a1')  //全选按钮
        var b1 = document.getElementById('b1').getElementsByTagName('input')//下面的所有的复选框
        var a3 = document.getElementById('a3')  //全选按钮
        var a4 = document.getElementById('a4')  //全选按钮
        var a5 = document.getElementById('a5')  //反选
// 用b1 div包住全部input来实现全选
        a1.addEventListener('click',name);
       function name() {
            for (let i = 0; i < b1.length; i++) {
                b1[i].checked = this.checked;
            }
        }
// 第二种  也可用封装函数来实现全选/全不选
a1.addEventListener('click',name);;
function name() {
  if (this.checked) {
    setAll()
  }else{
    setNo()
  }
}
// 全选
      function setAll(){
        var play2 = document.getElementsByClassName('play')
        for (let i = 0; i < play2.length; i++) {
            play2[i].checked = true;
        }
      }
// 全不选
      function setNo(){
        var play1 = document.getElementsByClassName('play')
        for (let i = 0; i < play1.length; i++) {
            play1[i].checked = false;
        }
      }
// 反选
      function other(){
        var play3 = document.getElementsByClassName('play')
        for (let i = 0; i < play.length; i++) {
           if (play3[i].checked == false) {
            play3[i].checked = true
           } else {
            play3[i].checked = false
           }
        }
      } 

// 第二种反选
      function other(){
        var play4 = document.getElementsByClassName('play')
        for (let i = 0; i < play4.length; i++) {
         play4[i].checked =! play4[i].checked
        }
      } 

    </script>
</body>
</html>