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

轉載：https://blog.csdn.net/chenchunlin526/article/details/77448168

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

1、checked屬性定義
先了解下input標籤的checked屬性：
一、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" />。

本文討論的範圍爲jQuery1.6+ 以上版本，如今jQuery已經到3.2.1了（2018年1月4日）！ 。開發中建議使用1.11及以上版本。

2、checked屬性的用法
注意：操做checked、disabled、selected屬性，強制建議只用prop()方法！！，不要用attr()方法。
一、jQuery判斷checked是不是選中狀態的三種方法:
.attr('checked') // 返回:"checked"或"undefined" ;
.prop('checked') // 返回true/false
.is(':checked')  // 返回true/false //別忘記冒號哦

二、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"); //不標準

3、標籤中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中的attr()與prop()設置屬性、獲取屬性的區別 - chunlynn的小屋 - CSDN博客
http://blog.csdn.net/chenchunlin526/article/details/77426796  

4、jQuery操做checkbox技巧總結

一、獲取單個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();

二、 獲取多個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); 
} 

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

四、設置最後一個checkbox爲選中值
$("#chk1").find('input:checkbox:last').prop("checked",true);

五、根據索引值設置任意一個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

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

七、刪除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();

八、所有選中或所有取消選中
$("#chk1").find('input:checkbox').each(function() {
    $(this).prop('checked', true);
});
//或者
$("#chk1").find('input:checkbox').each(function () {
    $(this).prop('checked',false);
});

九、選中全部奇數項或偶數項
$("#chk1").find("input[type='checkbox']:even").prop("checked",true); //選中全部偶數 
$("#chk1").find("input[type='checkbox']:odd").prop("checked",true); //選中全部奇數 

十、反選
方法一：
$("#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;
    });
}

本系列其餘相關文章：【1】jQuery中的attr()與prop()設置屬性、獲取屬性的區別 - chunlynn的小屋 - CSDN博客【2】<a>標籤中 href 和 onclick 的區別，以及 onclick(this) 傳遞this參數詳解 - chunlynn的小屋 - CSDN博客【3】jQuery的removeProp()與removeAttr()移除屬性的區別 - chunlynn的小屋 - CSDN博客