checkbox中checked屬性總結【轉】

目錄

• 一、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='1']").prop('checked',true);
$("#chk1").find("input:[type='checked'][value='1']").prop('checked',true);

 
文章轉自：https://blog.csdn.net/chaoyue1861/article/details/83752870