jQuery 关于 checkbox

一、针对单个的checkbox的JQuery操作：

HTML：

<label class="checkbox-group" style="position: relative;">
    <input class="singleCheck" onchange="siglecheck(this);" type="checkbox">
    <ins class="checkbox-cover"></ins>
</label>

jQuery 选中取消操作：

function siglecheck(obj){     
    if($(obj).prop("checked")){
    　　$(obj).attr("checked","checked");
       $(obj).parent().addClass("checked");    
    }else{
       $(obj).removeAttr("checked");
       $(obj).parent().removeClass("checked");    
    }     
 }

 

jquery判断checked的方法:

.attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'); //16+:true/false
.is(':checked'); //所有版本:true/false//

jquery赋值checked:

所有的jquery版本都可以这样赋值:
 $(obj).attr("checked","checked");
 $(obj).attr("checked",true);

jquery1.6+:prop 赋值:
 $(obj).prop("checked",true); 
 $(obj).prop({checked:true});
 $(obj).prop("checked","checked");  
 $(obj).prop("checked",function(){
     return true;//函数返回true或false
});

 

二、针对一组的checkbox的JQuery操作：

HTML:

<label class="checkbox-group" for="checkall" style="position: relative;">
    <input class="multCheck" type="checkbox" id="checkall" />
</label>

<label class="checkbox-group" style="position: relative;">
    <input class="singleCheck" type="checkbox" />
</label>
<label class="checkbox-group" style="position: relative;">
    <input class="singleCheck" type="checkbox" />
</label>

全选 / 反选

$("#checkall").change(function(){           
        if($("#checkall").prop("checked")==true){  
           $("input:checkbox").prop("checked",true); 
           $("input:checkbox").attr("checked","checked");  
       $("input:checkbox").parent().addClass("checked");    
        } else  {  
            $("input:checkbox").removeAttr("checked");                 
            $("input:checkbox").parent().removeClass("checked");    
        }   
});

清空子选项，全选清空

$(".singleCheck").bind({  
     change:function(){
            $(".singleCheck").each(function(){
            if($(this).attr("checked") == "checked"){
               $(this).removeAttr("checked"); 
               $(this).parent().removeClass("checked");
            }else{
               $(this).prop("checked",true); //singleCheck，页面显示选中  
                   $(this).attr("checked","checked");//checked属性值设置为checked  
                   $(this).parent().addClass("checked");
                 };
            });
            var checkedLength=$(".singleCheck[checked='checked']").length; //attr方法赋值checked都为计算出子checkbox的长度  
            var subLength=$(".singleCheck").length; 
            if(subLength!=checkedLength){  
                $("#checkall").prop("checked",false); 
                $("#checkall").removeAttr("checked");
                $("#checkall").parent().removeClass("checked");
            } else { 
                 //如果所有的子checkbox被选中，全选框也全选中
                $("#checkall").attr("checked","checked");  
                $("#checkall").prop("checked",true);  
                $(".singleCheck").attr("checked","checked");  
                $(".singleCheck").prop("checked",true);  
                $("#checkall").parent().addClass("checked");
            }   
        }     
     });

 

其他说明：

1、checkbox 、radio等应该用 change 事件，防止重复二次点击操作（click事件点击后会激发两次操作）

2、像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些属于固有属性，需要使用prop方法操作，才会获得正确的结果。如果属性是我们自己自定义上去，建议使用attr方法。

3、attr 是对checked属性进行修改。prop方法只能让checkbox在页面上动态的显示选中或不选中，属性并没有改变。