HTML复选框实现全选反选全不选的简单小实例

最新推荐文章于 2023-05-17 15:38:46 发布

super晓权

最新推荐文章于 2023-05-17 15:38:46 发布

阅读量3.2k

点赞数 2

分类专栏： Web技术文章标签： web jsp java

本文链接：https://blog.csdn.net/qq_38230811/article/details/83855429

版权

Web技术专栏收录该内容

33 篇文章 4 订阅

订阅专栏

复选框实现全选反选全不选的简单小实例

<html>
 <head>
  <title>HTML</title>
  <style type="text/css">

  </style>
 </head>
 <body>
   <input type="checkbox" id="boxid" onclick="selectAllorNo();" />全选/全不选
   
   <br/>
   <input type="checkbox" name="love"/>看书     <br/>
   <input type="checkbox" name="love"/>写字     <br/>
   <input type="checkbox" name="love"/>看电视   <br/>
   <input type="checkbox" name="love"/>听音乐   <br/>
   <input type="checkbox" name="love"/>打游戏   <br/>
   <input type="checkbox" name="love"/>爱晓权   <br/>
   <br/>
   <input type="button" value="全选"   onclick="selectAllOrNot(true);"/>
   <input type="button" value="全不选" onclick="selectAllOrNot(false);"/>
   <input type="button" value="反选"   onclick="selectOthers();"/>
   <script type="text/javascript">
     //实现全选或者全不选复选框的操作
     function selectAllorNo(){
       //获取所有复选框的对象集  
       var boxid=document.getElementById("boxid"); 
	   // 当鼠标点击按钮时 点击状态发生改变后 在执行此方法  因此 这里的判断应该为
	   // 如果复选框为true 说明之前是false  需要全选   反之 全不选   
	   if(boxid.checked==false){
         selectAllOrNot(false);
	   }else{
         selectAllOrNot(true);
	   }
	 }


      //实现全选按钮 和 全不选按钮的操作
	  function selectAllOrNot(bool){
	   //获取name=love 的对象集  一个name可以对应多个元素  所有没有getElementByName()这个方法
       var loves=document.getElementsByName("love"); 
	   //获取id=boxid 的对象集   一个id只能对应一个元素  所有没有getElementsById()这个方法
       var boxid=document.getElementById("boxid"); 
	   //将复选框设置为不选
	   boxid.checked=bool;
	   for(var i=0;i<loves.length;i++){
           loves[i].checked=bool;
	   }
	 }
       //实现反选的操作 
	  function selectOthers(){
       //获取所有复选框的对象集  
       var loves=document.getElementsByName("love"); 
       var boxid=document.getElementById("boxid"); 
	   if(boxid.checked==true){boxid.checked=false}
	   else{boxid.checked=true}
       for(var i=0;i<loves.length;i++){
           if(loves[i].checked==true){loves[i].checked=false}
	       else{loves[i].checked=true}
	   }
       
	 }

    </script>

 </body>
</html>

super晓权

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
HTML复选框实现全选反选全不选的简单小实例

复选框实现全选反选全不选的简单小实例&lt;html&gt; &lt;head&gt; &lt;title&gt;HTML&lt;/title&gt; &lt;style type="text/css"&gt; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;in
复制链接

扫一扫