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