自定义复选框样式及全选操作

自定义复选框样式

复选框结构 

　　input框去其样式宽高为0;定位到父盒子内，我们需用其：checked 属性

　　下面的span为自定义样式，定位到父盒子内

    、

效果展示

   

 

js 代码

　　模拟复选框样式 

$(".ck_MN").click(function(){
     var ck_Inp = $(this).siblings(".ckIpt");
     var Ck_box = $(this).parents(".Ckbox");
    if(ck_Inp.prop("checked")){
         //没有选中
         $(this).removeClass("Nicon-cked");
         ck_Inp.removeProp("checked");
     }else{
        //选中
         $(this).addClass("Nicon-cked");
         ck_Inp.prop("checked","checked");
     }
 })

全选 反选 控制
　　需先做单独的全选 反选控制所有
　　再做以下判断 如有一个没有选中 那么全选按钮不选中