jQuery操作複選框checkbox技巧總結 --- 設置選中、取消選中、獲取被選中的值、判斷是否選中等

一、checked屬性定義
先了解下input標籤的checked屬性：
1、HTML <input> checked 屬性
◆ 定義和用法
checked 屬性是一個布爾屬性。
checked 屬性規定在頁面加載時應該被預先選定的 <input> 元素。
checked 屬性適用於 <input type="checkbox"> 和 <input type="radio">。
checked 屬性也可以在頁面加載後，通過 JavaScript 代碼進行設置。
◆ HTML 4.01 與 HTML5之間的差異
無。
◆ HTML 與 XHTML 之間的差異
在 XHTML 中，禁止屬性最小化，checked 屬性必須定義爲<input checked="checked" />。

二、checked屬性的用法
注意：操作checked、disabled、selected屬性，強制建議只用prop()方法！！，不要用attr()方法。
1、jQuery判斷checked是否是選中狀態的三種方法:
.attr('checked') // 返回:"checked"或"undefined" ;
.prop('checked') // 返回true/false
.is(':checked')  // 返回true/false //別忘記冒號哦
2、jQuery賦值checked的幾種寫法:
所有的jQuery版本都可以這樣賦值，不建議用attr():
$("#cb1").attr("checked","checked"); //通用做法，現在不推薦了
$("#cb1").attr("checked",true); //不標準，不推薦了
$("#cb1").attr("checked","true"); //不標準，不推薦了
jQuery的prop()的4種賦值（推薦如下寫法）:
$("#cb1").prop("checked",true); //標準寫法，推薦！
$("#cb1").prop({checked:true}); //map鍵值對    
$("#cb1").prop("checked",function(){
    return true;//函數返回true或false
});
//$("#cb1").prop("checked","checked"); //不標準

三、標籤中checked="checked"已有，但卻不顯示打勾的解決辦法

在做web項目的時候，做了一個功能，就是當勾選欄目，把所有的角色全勾上。剛開始使用瞭如下代碼：
function check(id,check) {        
    if (check) {                
        $("." + id).find("input[type='checkbox']").attr("checked", true);        
    } else {                
        $("." + id).find("input[type='checkbox']").attr("checked", false);        
    }
}
第一遍勾選和取消是有效的，但是第二遍以後就沒反應了，查看了屬性，發現checked屬性一直存在，但是沒顯示勾。就考慮移除checked屬性看看。 
function check(id,check) {        
    if (check) {                
        $("." + id).find("input[type='checkbox']").attr("checked", true);        
    } else {                
        $("." + id).find("input[type='checkbox']").removeAttr("checked");        
    }
}
這次看到checked屬性勾上有了，取消就沒了，可是問題還是沒解決，還是第二遍以後就沒反應了。
可是我都用1.11的版本了，正確的做法是使用prop()方法設置checkbox的checked屬性值。 
function check(id,check) {        
    if (check) {                
        $("." + id).find("input[type='checkbox']").prop("checked", true);        
    } else {                
        $("." + id).find("input[type='checkbox']").prop("checked", false);        
    }
}
這個問題會出現的本質就是，jQuery中的attr()和prop()兩個方法的使用區別。

四、jQuery操作checkbox技巧總結

1、獲取單個checkbox選中項的值(三種寫法)
$("#chx1").find("input:checkbox:checked").val()
//或者
$("#chx1").find("input:[type='checkbox']:checked").val();
$("#chx1").find("input[type='checkbox']:checked").val();
//或者
$("#chx1").find("input:[name='ck']:checked").val();
$("#chx1").find("input[name='ck']:checked").val();

2、 獲取多個checkbox選中項
$("#chk1").find('input:checkbox').each(function() { //遍歷所有複選框
    if ($(this).prop('checked') == true) {
        console.log($(this).val()); //打印當前選中的複選框的值
    }
});
function getCheckBoxVal(){ //jquery獲取所有選中的複選框的值 
    var chk_value =[]; 
    $("#chk1").find('input[name="test"]:checked').each(function(){ //遍歷，將所有選中的值放到數組中
        chk_value.push($(this).val()); 
    }); 
    alert(chk_value.length==0 ?'你還沒有選擇任何內容！':chk_value); 
} 

3、設置第一個checkbox 爲選中值
$("#chk1").find('input:checkbox:first').prop("checked",true);
//或者
$("#chk1").find('input:checkbox').eq(0).prop("checked",true);

4、設置最後一個checkbox爲選中值

$("#chk1").find('input:checkbox:last').prop("checked",true);

5、根據索引值設置任意一個checkbox爲選中值
$("#chk1").find('input:checkbox').eq(索引值).prop('checked', true);  //索引值=0,1,2.... 
//或者
$("#chk1").find('input:checkbox').slice(1,2).prop('checked', true); //同時選中第0個和第1個checkbox
//從索引0開始（包含），到索引2（不包含）的checkbox

6、根據value值設置checkbox爲選中值
$("#chk1").find("input:checkbox[value='1']").prop('checked',true);
$("#chk1").find("input[type='checkbox'][value='1']").prop('checked',true);

7、刪除checkbox：①刪除value=1的checkbox ②刪除第幾個checkbox
 $("#chk1").find("input:checkbox[value='1']").remove(); //將匹配元素從DOM中刪除，將標籤從頁面上刪除了

$("#chk1").find("input:checkbox").eq(index).remove(); //索引值 index=0,1,2....
//如刪除第3個checkbox:
$("#chk1").find("input:checkbox").eq(2).remove();
8、全部選中或全部取消選中
$("#chk1").find('input:checkbox').each(function() {
    $(this).prop('checked', true);
});
//或者
$("#chk1").find('input:checkbox').each(function () {
    $(this).prop('checked',false);
});
9、選中所有奇數項或偶數項
$("#chk1").find("input[type='checkbox']:even").prop("checked",true); //選中所有偶數 
$("#chk1").find("input[type='checkbox']:odd").prop("checked",true); //選中所有奇數 
10、反選
方法一：
$("#btn4").click(function(){ 
    $("input[type='checkbox']").each(function(){ //反選 
         if($(this).prop("checked")){ 
             $(this).prop("checked",false); 
          } else{ 
             $(this).prop("checked",true); 
         } 
    });    
}); 
方法二：
$("#btn4").on('click',function(){ 
//反選所有的複選框(沒選中的改爲選中，選中的改爲取消選中)
    $("#chk1").find("input[type='checkbox']").prop("checked", function(index, oldValue){
        return !oldValue;
    });
}