利用js实现复选框的全选和反选

最新推荐文章于 2023-07-11 22:34:21 发布

qq_39485970

最新推荐文章于 2023-07-11 22:34:21 发布

阅读量333

点赞数

本文链接：https://blog.youkuaiyun.com/qq_39485970/article/details/82930417

版权

本文详细介绍了如何使用HTML和JavaScript来创建一个动态的全选和反选功能，通过简单的代码实现对复选框的批量操作。在页面加载完成后，通过获取所有名为a的复选框元素，利用事件监听器实现当复选框状态改变时弹出其值的功能。同时，提供了两个按钮，分别用于一键全选和反选所有复选框。

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

<!DOCTYPE html>
<html>
<head>
   <title>142</title>
   <meta charset="utf-8">
   <script type="text/javascript">
       window.οnlοad=function()
       {
          var a=document.getElementsByName("a");
          var i;

          for(i=0;i<a.length;i++)
          {
             a[i].οnchange=function()
             {
                 alert(this.value);
             }
          }
          }

          function ac()
          {
              var a,i;

a=document.getElementsByName("a");

              for(i=0;i<a.length;i++)
              {
                  a[i].checked=true;
              }
          }

          function as()
          {
              var a=document.getElementsByName("a");
                  var i;
              for(i=0;i<a.length;i++)
              {
                  if(a[i].checked==true)
                  {
                      a[i].checked=false;
                  }

                  else
                      a[i].checked=true;
              }
          }

   </script>
</head>
<body>
   <label><input type="checkbox" name="a" value="11">11</label>
   <label><input type="checkbox" name="a" value="22">22</label>
   <label><input type="checkbox" name="a" value="33">33</label>

<div>
    <label><input type="radio" name="ab" οnchange="ac()">全选</label>
    <label><input type="radio" name="ab" οnchange="as()">反选</label>
</div>

</body>
</html>