用javascript选中所有的checkbox

最新推荐文章于 2024-08-22 02:15:13 发布

原创最新推荐文章于 2024-08-22 02:15:13 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

javascript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何通过一个按钮或一个Checkbox来实现多个Checkbox的选择与取消选择功能。提供了三种不同的实现方式：使用一个按钮全选/取消全选、使用一个按钮全选、另一个按钮取消全选、以及使用一个Checkbox控制其他Checkbox的选择状态。所有示例均采用HTML和JavaScript实现。

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

使用一个按钮选中所有的checkbox

<form   name=aa1   >   
      <p>   
        <input   type=checkbox   name="radiotex"   value="1">1   
      </p>     <p>   
          <input   type=checkbox   name="radiotex"   value="3">3   
      </p>   
      <p>   
          <input   type=checkbox   name="radiotex"   value="4">4   
      </p>   
      <p>   
          <input   type=checkbox   name="radiotex"   value="2">2   
      </p>   
    <input   type   =   button   value=SelectAll   onclick="SelectAll()"   
  </form>   
  <script>   
  checkit   =   true;   
  function   SelectAll()   
  {   
      aa   =   document.getElementsByName("radiotex");   
      if   (checkit)   
      {   
      for   (i=0;i<aa.length;i++)   
        aa.item(i).checked=true;   
        checkit   =   false;   
      }   
      else   
      {   
      for   (i=0;i<aa.length;i++)   
        aa.item(i).checked=false;   
        checkit   =   true;   
      }   
  }   
    
  </script>

使用一个按钮选中所有的checkbox 2

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script>
   function selectall()
   {
   var obj=document.all.b1;
   for(var i=0;i<obj.length;i++)
   {
  obj[i].checked=true;
   }
   }
   function cacelall()
   {
  var obj=document.all.b1;
   for(var i=0;i<obj.length;i++)
   {
  obj[i].checked=false;
   }
   }
  </script>
 </HEAD>

 <BODY>
  郭磊<input type="checkbox" checked="checked" name="b1"/>  常伟<input type="checkbox" checked="checked" name="b1"/>  杨怀颖<input type="checkbox" name="b1"/> 
<input type="button" value="全部选中" onclick="selectall();"/>  <input type="button" value="全部取消" onclick="cacelall();"/> 
 </BODY>
</HTML>

使用一个checkbox选中其他的checkbox

<html>   
  <head>   
  <title></title>   
  </head>   
  <script   language="javascript">   
  function   chooseallcheckbox(checkcaption,checksel)   
  {   
      var   checkselelement=document.all(checksel);   
      var   checkcaptionelement=document.all(checkcaption,0);   
      if   (checkcaptionelement.checked){   
        for   (i=0;i<checkselelement.length;i++)   
        {checkselelement[i].checked   =   true;}   
      }   
      else   
  {   
    
        for   (i=0;i<checkselelement.length;i++)   
        {checkselelement[i].checked   =   false;}   
  }   
  }   
  </script>   
  <body>   
  <form   name=aa1   >   
      <p>   
          <input   type=checkbox   name="checkcaption"   value="1"   onClick="chooseallcheckbox('checkcaption','radiotex');">   
      </p>     <p>   
          <input   type=checkbox   name="radiotex"   value="1">1   
      </p>     <p>   
          <input   type=checkbox   name="radiotex"   value="3">3   
      </p>   
      <p>   
          <input   type=checkbox   name="radiotex"   value="4">4   
      </p>   
      <p>   
          <input   type=checkbox   name="radiotex"   value="2">2   
      </p>   
      
  </form>   
  </body>   
  </html>