一、checked屬性定義
先了解下input標(biāo)簽的checked屬性：
1、HTML <input> checked 屬性
◆ 定義和用法
checked 屬性是一個(gè)布爾屬性。
checked 屬性規(guī)定在頁面加載時(shí)應(yīng)該被預(yù)先選定的 <input> 元素。
checked 屬性適用于 <input type="checkbox"> 和 <input type="radio">。
checked 屬性也可以在頁面加載后，通過 JavaScript 代碼進(jìn)行設(shè)置。
◆ HTML 4.01 與 HTML5之間的差異
無。
◆ HTML 與 XHTML 之間的差異
在 XHTML 中，禁止屬性最小化，checked 屬性必須定義為<input checked="checked" />。
本文討論的范圍為jQuery1.6+ 以上版本，現(xiàn)在jQuery已經(jīng)到3.2.1了（2018年1月4日）！ 。開發(fā)中建議使用1.11及以上版本。
二、checked屬性的用法
注意：操作checked、disabled、selected屬性，強(qiáng)制建議只用prop()方法?。?，不要用attr()方法。
1、jQuery判斷checked是否是選中狀態(tài)的三種方法:
.attr('checked') // 返回:"checked"或"undefined" ;
.prop('checked') // 返回true/false
.is(':checked') // 返回true/false //別忘記冒號(hào)哦
2、jQuery賦值checked的幾種寫法:
所有的jQuery版本都可以這樣賦值，不建議用attr():
$("#cb1").attr("checked","checked"); //通用做法，現(xiàn)在不推薦了
$("#cb1").attr("checked",true); //不標(biāo)準(zhǔn)，不推薦了
$("#cb1").attr("checked","true"); //不標(biāo)準(zhǔn)，不推薦了
jQuery的prop()的4種賦值（推薦如下寫法）:
$("#cb1").prop("checked",true); //標(biāo)準(zhǔn)寫法，推薦！
$("#cb1").prop({checked:true}); //map鍵值對(duì)
$("#cb1").prop("checked",function(){
return true;//函數(shù)返回true或false
});
//$("#cb1").prop("checked","checked"); //不標(biāo)準(zhǔn)
三、標(biāo)簽中checked="checked"已有，但卻不顯示打勾的解決辦法
在做web項(xiàng)目的時(shí)候，做了一個(gè)功能，就是當(dāng)勾選欄目，把所有的角色全勾上。剛開始使用了如下代碼：
function check(id,check) {
if (check) {
$("." + id).find("input[type='checkbox']").attr("checked", true);
} else {
$("." + id).find("input[type='checkbox']").attr("checked", false);
}
}
第一遍勾選和取消是有效的，但是第二遍以后就沒反應(yīng)了，查看了屬性，發(fā)現(xiàn)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屬性勾上有了，取消就沒了，可是問題還是沒解決，還是第二遍以后就沒反應(yīng)了。
可是我都用1.11的版本了，正確的做法是使用prop()方法設(shè)置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);
}
}
這個(gè)問題會(huì)出現(xiàn)的本質(zhì)就是，jQuery中的attr()和prop()兩個(gè)方法的使用區(qū)別。
具體請(qǐng)參考：
jQuery中的attr()與prop()設(shè)置屬性、獲取屬性的區(qū)別 - chunlynn的小屋 - CSDN博客
http://blog.csdn.net/chenchunlin526/article/details/77426796
四、jQuery操作checkbox技巧總結(jié)
1、獲取單個(gè)checkbox選中項(xiàng)的值(三種寫法)
$("#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、 獲取多個(gè)checkbox選中項(xiàng)
$("#chk1").find('input:checkbox').each(function() { //遍歷所有復(fù)選框
if ($(this).prop('checked') == true) {
console.log($(this).val()); //打印當(dāng)前選中的復(fù)選框的值
}
});
function getCheckBoxVal(){ //jquery獲取所有選中的復(fù)選框的值
var chk_value =[];
$("#chk1").find('input[name="test"]:checked').each(function(){ //遍歷，將所有選中的值放到數(shù)組中
chk_value.push($(this).val());
});
alert(chk_value.length==0 ?'你還沒有選擇任何內(nèi)容！':chk_value);
}
3、設(shè)置第一個(gè)checkbox 為選中值
$("#chk1").find('input:checkbox:first').prop("checked",true);
//或者
$("#chk1").find('input:checkbox').eq(0).prop("checked",true);
4、設(shè)置最后一個(gè)checkbox為選中值
$("#chk1").find('input:checkbox:last').prop("checked",true);
5、根據(jù)索引值設(shè)置任意一個(gè)checkbox為選中值
$("#chk1").find('input:checkbox').eq(索引值).prop('checked', true); //索引值=0,1,2....
//或者
$("#chk1").find('input:checkbox').slice(1,2).prop('checked', true); //同時(shí)選中第0個(gè)和第1個(gè)checkbox
//從索引0開始（包含），到索引2（不包含）的checkbox
6、根據(jù)value值設(shè)置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 ②刪除第幾個(gè)checkbox
$("#chk1").find("input:checkbox[value='1']").remove(); //將匹配元素從DOM中刪除，將標(biāo)簽從頁面上刪除了
$("#chk1").find("input:checkbox").eq(index).remove(); //索引值 index=0,1,2....
//如刪除第3個(gè)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、選中所有奇數(shù)項(xiàng)或偶數(shù)項(xiàng)
$("#chk1").find("input[type='checkbox']:even").prop("checked",true); //選中所有偶數(shù)
$("#chk1").find("input[type='checkbox']:odd").prop("checked",true); //選中所有奇數(shù)
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(){
//反選所有的復(fù)選框(沒選中的改為選中，選中的改為取消選中)
$("#chk1").find("input[type='checkbox']").prop("checked", function(index, oldValue){
return !oldValue;
});
}
聯(lián)系客服
