[TOC] 一、checked屬性定義和用法 1.checked屬性是一個布爾屬性 2.checked屬性規定在頁面載入時應該被預先選定的``元素 3.checked屬性適用於 ` 4.checked屬性也可以在頁面加在後，通過JavaScript代碼進行設置 attr()/prop()方法設置或返 ...
目錄
一、checked屬性定義和用法
1.checked屬性是一個布爾屬性
2.checked屬性規定在頁面載入時應該被預先選定的<input>元素
3.checked屬性適用於<input type="checkbox">和<input type="radio">
4.checked屬性也可以在頁面加在後，通過JavaScript代碼進行設置
attr()/prop()方法設置或返回被選元素的屬性和值，當該方法用於返回屬性值時，則返回第一個匹配元素的值，當該方法用於設置屬性值時，則為匹配元素集合設置一個或多個屬性/值對。例如：$("#input").attr({width:"160",height:"180"});
二、checked屬性的用法
操作checked、disabled、selected屬性，建議只用prop()方法，不要使用attr()方法。
1.Jquery判斷checked是否選中狀態的三種方法：
1>.attr("checked") //返回："checked" 或 "undefined"
2>.prop("checked") //返回 true/false
3>.is(":checked") //返回 true/false
2.Jquery使用attr屬性賦值checked
1> $("input[type='checked']").attr("checked","checked"); //通用
2> $("input[type='checked']").attr("checked",false); //不標準
3> $("input[type='checked']").attr("checked","false"); //不標準
3.Jquery使用prop屬性賦值checked
1> $("input[type='checked']").prop("checked",true); //標準寫法
2> $("input[type='checked']").prop({cheked:true})； //map鍵值對
3> $("input[type='checked']").prop("checked",funtion(){ return true; }); //函數返回true或false
4> $("input[type='checked']").prop("checked","checked"); //不標準
4.獲取單個checkbox選中項的值
1>$("#chx1").find("input:checkbox:checked").val()
2>$("#chx1").find("input[type='checkbox']:checked").val()
3>$("#chx1").find("input:[type='checkbox']:checked").val()
4>$("#chx1").find("input[name='ck']:checked").val()
5>$("#chx1").find("input:[name='ck']:checked").val()
5.勾選或取消
function check(id,check){
if(check){
$("."+id).find("input:[type='checkbox']").prop("checked",true);
}else{
$("."+id).find("input[type='checkbox']").prop("checked",false);
}
}
6.獲取多個checkbox選中項
$("#chk1").find("input:checkbox").each(function(){
if($(this).prop('checked')==true){
console.log($(this).val());
}
});
7.設置第一個checkbox為選中值
$("#chk1").find("input:checkbox:first").prop("checked",true);
$("#chk1").find("input:checkbox").eq(0).prop("checked",true);
8.設置最後一個checkbox為選中值
$("#chk1").find("input:checkbox:last").prop("checked",true);
9.選中所有奇數或偶數項
$("#chk1").find("input:[type='checkbox']:even").prop("checked",true);
$("#chk1").find("input[type='checkbox']:odd").prop("checked",true);
10.根據索引值設置任意一個checkbox為選中值
$("#chk1").find('input:checkbox').eq(索引值).prop("checked",true);
$("#chk1").find("input:checkbox").slice(1,2).prop("checked",true);//同時選中第0個和第1個checkbox
11.根據value值設置checkbox為選中值
$("#chk1").find("input:checkbox[value='1']").prop('checked',true);
$("#chk1").find("input:[type='checked'][value='1']").prop('checked',true);
文章轉自：https://blog.csdn.net/chaoyue1861/article/details/83752870
