码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-10-18 11:38:51      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:

自定义复选框样式

复选框结构 

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

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

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

标签:

原文地址:http://www.cnblogs.com/Kyaya/p/5972578.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!