【js】js复选框全选反选全不选案例

最新推荐文章于 2022-08-26 17:40:58 发布

a15015103

最新推荐文章于 2022-08-26 17:40:58 发布

阅读量356

点赞数

分类专栏：程序or学习相关 js

本文链接：https://blog.csdn.net/a15015103/article/details/8155216

版权

程序or学习相关同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

方法1：

html界面：

 
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
 <html>  
   <head>  
     <title>nameNode.html</title>  
       
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
     <meta http-equiv="description" content="this is my page">  
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
       
     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
   
   </head>  
   <script type="text/javascript" src="./js/nameNode1.js" charset="UTF-8"></script>  
   
     
 <body>  
         <div>  
             兴趣爱好：  
             <br>  
             <br>  
             <input type="checkbox" name="fav" value="look" checked="checked">  
             看书  
             <input type="checkbox" name="fav" value="write">  
             写字  
             <input type="checkbox" name="fav" value="drow">  
             画画  
             <input type="checkbox" name="fav" value="dubao">  
             读报  
             <input type="checkbox" name="fav" value="TV">  
             看电视  
         </div>  
   
         <div>  
             <input type="radio" name="hx" id="qx" value="1">  
             全选  
             <input type="radio" name="hx" id="fx" value="2">  
             反选  
             <input type="radio" name="hx" id="qbx" value="0">  
             全不选  
         </div>  
     </body>  
 </html>  
 
 

js代码：

 
   window.onload = function(){  
         var favs = document.getElementsByName("fav");  
     //获取id = "qx"的元素节点的对象  
         var qx = document.getElementById("qx");  
         //注册事件  
         qx.onclick = function(){  
         //遍历所有 那么="fav"的节点对象并且改this.checked=true  
             for(var i=0;i<favs.length;i++){  
                 var fav = favs[i];  
                 fav.checked="vhecked";  
             }         
         }  
   
         //  
         var fx = document.getElementById("fx");  
         //注册事件  
         fx.onclick = function(){  
         //遍历所有 name="fav"的节点对象并且改this.checked=true  
             for(var i=0;i<favs.length;i++){  
                 var fav = favs[i];  
                 fav.checked=!fav.checked;  
             }         
         }  
   
         var qbx = document.getElementById("qbx");  
         //注册事件  
         qbx.onclick = function(){  
         //遍历所有 name="fav"的节点对象并且改this.checked=true  
             for(var i=0;i<favs.length;i++){  
                 //获取具体的某个对象  
                 var fav = favs[i];  
                 //修改checked属性  
                 fav.checked=false;  
             }         
         }  
 }  
 
 

方法2：

html界面：

 
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
 <html>  
   <head>  
     <title>nameNode.html</title>  
       
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
     <meta http-equiv="description" content="this is my page">  
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
       
     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
   
   </head>  
 <script type="text/javascript" src="./js/nameNode2.js" charset="UTF-8"></script>  
     
 <body>  
         <div>  
             兴趣爱好：  
             <br>  
             <br>  
             <input type="checkbox" name="fav" value="look" checked="checked">  
             看书  
             <input type="checkbox" name="fav" value="write">  
             写字  
             <input type="checkbox" name="fav" value="drow">  
             画画  
             <input type="checkbox" name="fav" value="dubao">  
             读报  
             <input type="checkbox" name="fav" value="TV">  
             看电视  
         </div>  
   
         <div>  
             <input type="radio" name="hx" id="qx" value="1">  
             全选  
             <input type="radio" name="hx" id="fx" value="2">  
             反选  
             <input type="radio" name="hx" id="qbx" value="0">  
             全不选  
         </div>  
     </body>  
 </html>  
 
 

js界面：

 
   window.onload = function(){  
         var favs = document.getElementsByName("fav");  
     //获取id = "qx"的元素节点的对象  
         var qx = document.getElementById("qx");  
         //注册事件  
         qx.onclick = function(){  
         //遍历所有 那么="fav"的节点对象并且改this.checked=true  
             for(var i=0;i<favs.length;i++){  
                 var fav = favs[i];  
                 fav.checked="vhecked";  
             }         
         }  
   
         //  
         var fx = document.getElementById("fx");  
         //注册事件  
         fx.onclick = function(){  
         //遍历所有 name="fav"的节点对象并且改this.checked=true  
             for(var i=0;i<favs.length;i++){  
                 var fav = favs[i];  
                 fav.checked=!fav.checked;  
             }         
         }  
   
         var qbx = document.getElementById("qbx");  
         //注册事件  
         qbx.onclick = function(){  
         //遍历所有 name="fav"的节点对象并且改this.checked=true  
             for(var i=0;i<favs.length;i++){  
                 //获取具体的某个对象  
                 var fav = favs[i];  
                 //修改checked属性  
                 fav.checked=false;  
             }         
         }  
 }  
 
 

方法3：

html界面：

 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
 <html>  
   <head>  
     <title>nameNode.html</title>  
       
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
     <meta http-equiv="description" content="this is my page">  
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
       
     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
   
   </head>  
 <script type="text/javascript" src="./js/nameNode3.js" charset="UTF-8"></script>  
     
 <body>  
         <div>  
             兴趣爱好：  
             <br>  
             <br>  
             <input type="checkbox" name="fav" value="look" checked="checked">  
             看书  
             <input type="checkbox" name="fav" value="write">  
             写字  
             <input type="checkbox" name="fav" value="drow">  
             画画  
             <input type="checkbox" name="fav" value="dubao">  
             读报  
             <input type="checkbox" name="fav" value="TV">  
             看电视  
         </div>  
   
         <div>  
             <input type="radio" name="hx" id="qx" value="1">  
             全选  
             <input type="radio" name="hx" id="fx" value="2">  
             反选  
             <input type="radio" name="hx" id="qbx" value="0">  
             全不选  
         </div>  
     </body>  
 </html>  
 
  

js界面：

 
   window.onload = function(){  
         var favs = document.getElementsByName("fav");  
     //获取id = "qx"的元素节点的对象  
         var qx = document.getElementById("qx");  
         //注册事件  
         qx.onclick = function(){  
         //遍历所有 那么="fav"的节点对象并且改this.checked=true  
             for(var i=0;i<favs.length;i++){  
                 var fav = favs[i];  
                 fav.checked="vhecked";  
             }         
         }  
   
         //  
         var fx = document.getElementById("fx");  
         //注册事件  
         fx.onclick = function(){  
         //遍历所有 name="fav"的节点对象并且改this.checked=true  
             for(var i=0;i<favs.length;i++){  
                 var fav = favs[i];  
                 fav.checked=!fav.checked;  
             }         
         }  
   
         var qbx = document.getElementById("qbx");  
         //注册事件  
         qbx.onclick = function(){  
         //遍历所有 name="fav"的节点对象并且改this.checked=true  
             for(var i=0;i<favs.length;i++){  
                 //获取具体的某个对象  
                 var fav = favs[i];  
                 //修改checked属性  
                 fav.checked=false;  
             }         
         }  
 }  
 
 

方法4：

html界面：

 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
 <html>  
   <head>  
     <title>nameNode.html</title>  
       
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
     <meta http-equiv="description" content="this is my page">  
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
       
     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
   
   </head>  
 <script type="text/javascript" src="./js/nameNode4.js" charset="UTF-8"></script>  
     
 <body>  
         <div>  
             兴趣爱好：  
             <br>  
             <br>  
             <input type="checkbox" name="fav" value="look" checked="checked">  
             看书  
             <input type="checkbox" name="fav" value="write">  
             写字  
             <input type="checkbox" name="fav" value="drow">  
             画画  
             <input type="checkbox" name="fav" value="dubao">  
             读报  
             <input type="checkbox" name="fav" value="TV">  
             看电视  
         </div>  
       
     <div>  
             <input type="radio" name="hx" id="qx" value="1" onclick="test(1)">  
             全选  
             <input type="radio" name="hx" id="fx" value="2" onclick="test(2)">  
             反选  
             <input type="radio" name="hx" id="qbx" value="0" onclick="test(0)">  
             全不选  
         </div>  
       
     </body>  
 </html>  
 
  

js界面：

 
    function test(value){  
         //获取name="fav"的所有节点对象  
         var favs = document.getElementsByName("fav");  
         for(var i=0;i<favs.length;i++){  
             var fav = favs[i];  
           
         switch(value){  
         case 1:  
             fav.checked = true;  
             break;//break语句只是跳出switch语句块，并没跳出for循环  
         case 2:  
             fav.checked = !fav.checked;  
             break;  
         case 0:  
             fav.checked = false;  
             break;  
         }  
         }  
 }  
 
  

运行结果如下：

a15015103

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【js】js复选框全选反选全不选案例

方法1：html界面：> html> head> title>nameNode.htmltitle> meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> meta http-equiv="description"
复制链接

扫一扫

专栏目录