复选框的操作，看这一篇就够啦~~
平常在工作中对于复选框的操作算频繁的了。尽管在网上已经有很多这方面的文章了，但是感觉总结的不够详细。下面是本人对于操作复选框进行的一些总结。下面的方法大多是基于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 }
