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