復選框選中
一、checked屬性定義
先了解下input標簽的checked屬性：
1、HTML <input> checked 屬性
◆ 定義和用法
checked 屬性是一個布爾屬性。
checked 屬性適用於 <input type="checkbox"> 和 <input type="radio">。
二、checked屬性的用法
註意：操作checked、disabled、selected屬性，強制建議只用prop()方法！！，不要用attr()方法。
1、jQuery判斷checked是否是選中狀態的三種方法:
.attr(‘checked‘) // 返回:"checked"或"undefined" ;
.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) {
} 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
四、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;
});
}
---------------------
作者：chunlynn
來源：CSDN
原文：https://blog.csdn.net/chenchunlin526/article/details/77448168
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
復選框選中