checkbox中checked屬性總結
一、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);