平常在工作中對於復選框的操作算頻繁的了。盡管在網上已經有很多這方面的文章了，但是感覺總結的不夠詳細。下面是本人對於操作復選框進行的一些總結。下面的方法大多是基於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 }