1. 程式人生 > >checkbox中checked屬性總結

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);