Js学习之路五 --- 选择框（全选、全不选、反选）_js 全选顺序为什么会变呢-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32737755/article/details/77950400

本文介绍了一个简单的前端示例，展示了如何使用JavaScript实现元素的选择、取消选择及反选功能。通过具体的HTML代码示例，读者可以了解如何控制复选框的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全选、反选、全不选，这三个功能想必大家见的不少了吧，在开发中很常用。闲话不多喷，先把反选的原理通过一个简单的例子来阐述一下（原理相同）：

一只名为啦啦啦….的div盒子的显示与隐藏：

<!DOCTYPE html>
<html>
      <head>
           <meta http-equiv="content-type" content="text/html;charset=utf-8">
           <meta name="author" content="zsh">
           <meta name="keywords" content="">
           <meta name="description" content="">
           <title>隐藏与显示</title>
           <style type="text/css">
           #div1 {
            width: 200px;
            height: 100px;
            border:1px solid #999;
            display: none;
           }
           </style>
     </head>
     <body>
     <input value="显示/隐藏" type="button" onclick="showOrHide()">
        <div id="div1">
            啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
        </div>

     </body>
     <script type="text/javascript">
       function showOrHide(){
             var divshow = document.getElementById('div1');
             if(divshow.style.display == 'block'){
                divshow.style.display = 'none';
                //如果已经显示 改变display变为不显示
             }else{
                divshow.style.display = 'block';
                //若不显示 则改变display为block 显示！
             }
      } 
     </script>
</html>

分割线 6 分割线 6 分割线 6 分割线 6 分割线 6 分割线 6

全选、全不选，比较容易想出其原理：状态全部改变 true转变为false，false转变为true

    反选的原理同上：
    若已选择（checked为true） 将选择状态改变为未选状态（false）
    若未选择（checked为false） 将选择状态改变为未选状态（true）

下面贴出代码：

<!DOCTYPE html>
<html>
      <head>
           <meta http-equiv="content-type" content="text/html;charset=utf-8">
           <meta name="author" content="zsh">
           <meta name="keywords" content="">
           <meta name="description" content="">
           <title>全选、不选、反选</title>
           <style type="text/css">
           </style>
     </head>
     <body>
      <input value="全选" type="button" id="btn1" /><br>
      <input value="全不选" type="button" id="btn2" /><br>
      <input value="反选" type="button" id="btn3" /><br>
      <div id="div1">
      <input type="checkbox" /><br>
      <input type="checkbox" /><br>
      <input type="checkbox" /><br>
      <input type="checkbox" /><br>
      <input type="checkbox" /><br>
      <input type="checkbox" /><br>
      </div>
     </body>
     <script type="text/javascript"> 
     window.onload=function(){   //页面加载完再执行
      var Btn1 = document.getElementById('btn1');
      var Btn2 = document.getElementById('btn2');
      var Btn3 = document.getElementById('btn3');

      var Div = document.getElementById('div1');
      var aInput = Div.getElementsByTagName('input');
      //获取div下的input
      Btn1.onclick = function(){  //匿名函数 全选
        for (var i = 0; i < aInput.length; i++) {
          aInput[i].checked = true;
        }
      }
      Btn2.onclick = function(){  //全不选
        for (var i = 0; i < aInput.length; i++) {
          aInput[i].checked = false;
        }
      }
      Btn3.onclick = function(){  //反选

        for (var i = 0; i < aInput.length; i++) {

            if(aInput[i].checked == true){
                aInput[i].checked = false;
             }else{
                aInput[i].checked = true;
             }
        }
      }

     }
     </script>
</html>