复选框的操作，看这一篇就够啦~~

平常在工作中对于复选框的操作算频繁的了。尽管在网上已经有很多这方面的文章了，但是感觉总结的不够详细。下面是本人对于操作复选框进行的一些总结。下面的方法大多是基于jquery的，所以要记得引用jquery哦~~用原生js的地方做了说明，大家各取所需吧。

HMTL代码如下：

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
 6     <title>复选框的操作</title>
 7 </head>
 8 <body >
 9     你擅长的是：
10     <input type="button" value="全选" id="all"> 
11     <input type="button" value="全不选" id="none"> 
12     <input type="button" value="反选" id="other"> 
13 
14     <ul id="checkbox">
15         <li>
16             <input type="checkbox" value="html" id="html" checked="checked" name="skill">
17             <label for="html">html</label>
18         </li>
19         <li>
20             <input type="checkbox" value="css" id="css" name="skill">
21             <label for="css">css</label>
22         </li>
23         <li>
24             <input type="checkbox" value="js" id="js" name="skill">
25             <label for="js">js</label>
26         </li>
27     </ul>
28     您选中了：<span id="showVal"></span>
29 </body>
30 </html>
复制代码

 

1.获取复选框

$("input[type='checkbox']"); //获取所有的复选框
$("input[name='skill']"); //获取name=skill的复选框
$("input[name="skill"]:checked"); //获取name=skill并且选中了的复选框

除了上面讲述的三种方法，还可以通过class类名，id名来获取，这里就不赘述了。

 

2.判断复选框是否选中

方法一：

if($('#html').is(':checked')) { //所有版本:true/false//别忘记冒号哦
   /*do something*/
}

方法二：

if ($('#html').attr('checked')) { //jquery 版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false

　　/*do something*/
}

方法三(推荐使用)：

if ($('#html').prop('checked')) { //jquery 1.6+添加的新方法，返回true/false
　　/*do something*/
}

 

方法四(js版)：

if(document.getElementById("html").checked){
   /*do something*/
}

 

3.判断复选框选中的个数

复制代码
 1 function selectLength(){    
 2   var selLen = 0;    
 3   $('input[name="skill"]').each(function(){    
 4       if($(this).is(':checked')){
 5           selLen++;
 6       } 
 7   });    
 8   $("#selLen").text(selLen);    
 9 }    
10 selectLength(); //执行函数
复制代码

 

4.获取复选框选中的值

复制代码
1 function jqchk(){  
2   var chk_value =[];    
3   $('input[name="skill"]:checked').each(function(){    
4    chk_value.push($(this).val());    
5   });    
6   $("#showVal").text((chk_value.length==0 ?'你还没有选择任何内容！':chk_value+" "));    
7 }  
8 jqchk(); //执行这个函数
复制代码

 

5.实时获取复选框选中的个数及选中的值

1 $('input[name="skill"]').click(function(){
2     selectLength();//获取选中的个数，上面第3条中写的函数
3     jqchk();//获取选中的值，上面第4条中写的函数
4 })

 

6.全选，全不选，反选

复制代码
 1 //全选
 2 $("#all").click(function(){  
 3     $("input[name='skill']").prop("checked",true); 
 4 });
 5 
 6 //全不选
 7 $("#none").click(function(){   
 8         $("input[name='skill']").prop("checked",false);
 9 });
10 
11 //反选
12 $("#other").click(function(){  
13     $("[name='skill']").each(function(){
14         if($(this).attr("checked")){  
15             $(this).prop("checked",false);  
16         }  
17         else{  
18             $(this).prop("checked",true);  
19         }  
20     })  
21 });
复制代码

 

7.prop的4种赋值

复制代码
$("#html″).prop("checked",true);
$("#html″).prop({checked:true}); //map键值对
$("#html″).prop("checked",function(){
    return true;//函数返回true或false
});
$("#html″).prop("checked","checked");
复制代码

 

8.获取选中的个数及选中的值（js 版）

复制代码
 1 function chk(){    
 2   var obj=document.getElementsByName('skill');  //选择所有name="'skill'"的对象，返回数组    
 3   //取到对象数组后，我们来循环检测它是不是被选中    
 4   var selVal="";    
 5   var selLen = 0;
 6   for(var i=0; i<obj.length; i++){    
 7     if(obj[i].checked) {
 8         selVal+=obj[i].value+',';  //如果选中，将value添加到变量selVal中   
 9         selLen++ 
10     } 
11   }      
12   document.getElementById("showVal").innerHTML = selVal==''?'你还没有选择任何内容！':selVal;   
13   document.getElementById("selLen").innerHTML = selLen;   
14 }
复制代码
 
 
posted @ 2024-01-15 09:38  smil、梵音  阅读(137)  评论(0)    收藏  举报