JavaScript复选框之全选、不选和反选

最新推荐文章于 2021-02-26 15:18:16 发布

云之前端

最新推荐文章于 2021-02-26 15:18:16 发布

阅读量244

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习总结文章标签：复选框 JavaScript 全选不选反选

本文链接：https://blog.youkuaiyun.com/qq_44586361/article/details/86631947

学习总结专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现全选、反选和取消全选的功能，通过具体代码示例展示了如何操作DOM元素，特别是input类型的复选框。此功能常见于表单处理和数据选择场景，能有效提升用户体验。

<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.function()
{
     var oBtn1=document.getElementById('btn1');
     var oBtn2=document.getElementById('btn2');
     var oBtn3=document.getElementById('btn3');
     var oDiv=document.getElementById('div1');
     var aCh=oDiv.getElementsByTagName('input');     //获取多个选项
     oBtn1.onclick=function()
     {
          for(var i=0;i<aCh.length;i++)                                         //使用for循环实现全选功能
          {
               aCh[i].checked=true;
          }
     };
     oBtn2.onclick=function()
     {
          for(var i=0;i<aCh.length;i++)                                           //使用for循环实现不选功能
          {
               aCh[i].checked=false;
           }
      };
      oBtn3.onclick=function()
      {
           for(var i=0;i<aCh.length;i++)
           {
                if(aCh[i].checked==true)                                                //使用if实现反选功能
                {  
                     aCh[i].checked=false;
                 }
                 else
                 {
                      aCh[i].checked=true;
                  }
              }
          };
      };
      </script>
      </head>
      <body>
      <input id="btn1" type="button" value="全选"/>
      <input id="btn2" type="buttton" value="不选"/>
      <input id="btn3" type="button" value="反选"/>
      <div id="div1">
      <input type="checkbox"/><br>
      <input type="checkbox"/><br>
      <input type="checkbox"/><br>
      <input type="checkbox"/><br>
      </div>
      </body>
      </html>