目錄
- 一、checked屬性定義和用法
- 二、checked屬性的用法
- 1.Jquery判斷checked是否選中狀態的三種方法：
- 2.Jquery使用attr屬性賦值checked
- 3.Jquery使用prop屬性賦值checked
- 4.獲取單個checkbox選中項的值
- 5.勾選或取消
- 6.獲取多個checkbox選中項
- 7.設定第一個checkbox為選中值
- 8.設定最后一個checkbox為選中值
- 9.選中所有奇數或偶數項
- 10.根據索引值設定任意一個checkbox為選中值
- 11.根據value值設定checkbox為選中值
一、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='https://www.cnblogs.com/KillBugMe/p/1']").prop('checked',true);
$("#chk1").find("input:[type='checked'][value='https://www.cnblogs.com/KillBugMe/p/1']").prop('checked',true);
文章轉自：https://blog.csdn.net/chaoyue1861/article/details/83752870
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/120089.html
標籤：JavaScript
上一篇：ES6---Promise應用: async, await
下一篇：js判斷字符是否在陣列中【轉】