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

自定义复选框样式

复选框结构 

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

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

转载于:https://www.cnblogs.com/Kyaya/p/5972578.html