首页 > 代码库 > 自定义复选框样式及全选操作

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

自定义复选框样式

复选框结构 

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

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

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