论checkbox和radio的样式美化问题
如果你下定决心要改变现有的默认的checkbox和radio的样式，那么我目前有两种办法：
1、自己动手写一个，也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉，使用绝对定位的方式，手动切换checked和unchecked的图片，定位到原来input显示的地方；
2、使用jQuery的iCheck插件 。
中文DOC地址：http://www.bootcss.com/p/icheck/
github地址：https://github.com/fronteed/iCheck
一、先来说说第一种办法吧，我觉得这个是最好的，又不用多添加js，自己写几行代码就行了。
demo如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="grey.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="icheck.js"></script>
<style>
.checkbox-label {
position:relative;
display:block;
}
.hidebox {
opacity:0;
filter:alpha(opacity:0);
z-index:2;
position:relative;
}
.checkbox-label .checkbtn {
display:block;
width:12px;
height:12px;
left:5px;
top:-15px;
position:absolute;
background: url(checked.png) no-repeat;
}
.checkbox-label .uncheckbtn {
background: url(unchecked.png) no-repeat;
}
</style>
</head>
<body >
<div class="container">
<div class="header">
<h1>CheckBox And Radio Demo</h1>
</div>
<div>
<label class="checkbox-label">
<input type="checkbox" class="hidebox" checked/>复选框1号
<p class="checkbtn"></p>
</label> <label class="checkbox-label">
<input type="checkbox" class="hidebox"/>复选框2号
<p class="checkbtn"></p>
</label> <label class="checkbox-label">
<input type="checkbox" class="hidebox"/>复选框3号
<p class="checkbtn"></p>
</label>
</div>
</div>
<!-- /container -->
<script>
(function($){
$('input[type=checkbox]').on('click',function(){
var box = $(this),
mark = box.parent().find('.checkbtn');
$(this).prop('checked') ? mark.addClass('uncheckbtn') : mark.removeClass('uncheckbtn');
});
})(jQuery);
</script> </body>
</html>
这是一个朋友（大牛）教我的方法，代码又少，写得又好，我也很喜欢。
这里面有的说的我感觉就是attr()和prop()方法，以前我没觉得有什么不同。但实际上还是有区别，简单来说吧，如果你想得到字符串的属性值的话那么就要用attr(),但如果你的本意是获得bool值得话，那么就要用prop()了。
二、那么如果你的项目比较大，兼容性封装性等各个方面要求比较严格的话，那么你可以尝试一下iCheck插件，但我目前还存在问题，如果你的checkbox和radio的功能比较简单的话，那么没有任何问题，但是如果你有全选部分选择的功能的话，那么你可能要花点心思了，我现在列出我的使用方法和心得，如果你有更好的解决其中问题的方法的话，请教教我喔，感激不尽。
简单使用真的简单，demo如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="grey.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="icheck.js"></script>
</head>
<body >
<div class="container">
<div class="header">
<h1>CheckBox And Radio Demo</h1>
</div>
<div> <label class="checkbox-label">
<input type="checkbox" class="hidebox" id="box1" checked/>复选框1号
<p class="checkbtn"></p>
</label> <label class="checkbox-label">
<input type="checkbox" class="hidebox" id="box2"/>复选框2号
<p class="checkbtn"></p>
</label> <label class="checkbox-label">
<input type="checkbox" class="hidebox" id="box3"/>复选框3号
<p class="checkbtn"></p>
</label> </div>
<div class="change">
<span class="toChecked">选中复选框1号和3号</span>
<span class="unChecked">取消选中复选框1号和3号</span>
<span class="toDisabled">disable复选框1号和3号单选框2号</span>
<span class="undisabled">取消disable复选框1号和3号单选框2号</span>
</div>
</div>
<!-- /container -->
<script>
$(document).ready(function(){
$('input').iCheck({
checkboxClass:'icheckbox_flat-grey',
radioClass:'iradio_flat-grey',
increaseArea:'20%'
});
}); $('.toChecked').click(function(){
$('#box1,#box3').iCheck('check');
});
$('.unChecked').click(function(){
$('#box1,#box3').iCheck('uncheck');
});
$('.toDisabled').click(function(){
$('#box1,#box3,#rad2').iCheck('disable');
});
$('.undisabled').click(function(){
$('#box1,#box3,#rad2').iCheck('enable');
}); </script> </body>
</html>
然后去下载iCheck.js和像grey.css（多种可选）这样的样式文件就可以了，简单的就可以换样式了喔。
但是如果你想用到项目里，可能就没这么简单了。我踩过的坑有：
1、虽然iCheck的实现原理是在input外包裹一层div用来实现样式图片的切换，跟我们手动实现的原理差不多，但是虽然我们可能在浏览器中不容易显示的看出来，实际上input的checked属性也已经切换了；
2、如果你的input部分是在js中动态写进去的话，那么就要注意你有关iCheck的代码的位置，一定要等到dom全部加载完成之后。iCheck才会起作用。
3、还有一个还没有迈出来的坑，如果你的项目这个相关的功能需要完成，那么你可能需要在回调函数中完成一些操作，我的问题就在于，里面的操作实际上已经完成了（控制台可查看），但是我在其中调用的iCheck（）方法，却不起作用了，看了很多github上的issue，相同问题很多。
like this：
$("#_hs_select_all").on('ifChecked',function(){
$("._hs_item_cb").prop('checked',true).iCheck('check');
$("._hs_item_cld_cb").prop('checked',true).iCheck('check');
}).on('ifUnchecked',function(){
$("._hs_item_cb").prop('checked',false).iCheck('uncheck');
$("._hs_item_cld_cb").prop('checked',false).iCheck('uncheck');
});
我也尝试过换2.x版本，但问题似乎更多，待解。
如果你也在换掉checkbox和radio默认的丑样式，两种方法都可任你选择。
论checkbox和radio的样式美化问题的更多相关文章
- checkbox和radio的样式美化问题
如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对 ...
- 巧用CSS3伪类选择器自定义checkbox和radio的样式
由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...
- 二十四、小程序中改变checkbox和radio的样式
来源:https://blog.csdn.net/qq_39364032/article/details/79742415 在微信小程序里面,有时候为了配合整个项目的风格,checkbox和radio ...
- 微信小程序开发——修改小程序原生checkbox、radio默认样式
复选框: 闲话少说,这里直接介绍如何修改小程序提供的复选框的样式,如原生的是这样的: 需要的是这样的: 示例代码: /*复选框外框样式*/ checkbox .wx-checkbox-input { ...
- Css实现checkbox及radio样式自定义
前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...
- input美化 checkbox和radio样式
input美化 checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...
- 自定义表单样式之checkbox和radio
1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都 ...
- HTML的checkbox和radio的美化
checkbox和radio的美化 checkbox: <style type="text/css"> input[type="checkbox"] ...
- css设置移动端checkbox和radio样式
复选框Checkbox是Web应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览 ...
随机推荐
- Web程序的运行原理及流程（二）
其实WEB服务器和WEB应用服务器这两个概念特别容易混淆 可以理解为装了不同软件(服务)的两台计算机(服务器)吧 先对两个概念做一个简单介绍 了解了基本的概念 我们再用两个典型的例子做一下比较(建立 ...
- 引入Ember插件 大概流程
引入Ember插件 xxx (转自美女同事 LZX) 1.ember install xxx(过程中可能会提示你安装其他包 按照提示语安装就行) 2.安装之后会看到 工作目录里已经出现了下载好的安 ...
- CPU虚拟化的常见技术
关键词:cpu虚拟化,KVM,Host-PassThrough,Nested,CGroup,NUMA,热添加 云计算虚拟化技术主要包括三个领域:计算.存储.网络 本文主要总结了计算虚拟化领域中的CPU ...
- sublime text3 less2css rem
1.下载sublime text3 官网地址:https://www.baidu.com/link?url=2kr0ijQXVL1_6oXdPByYh7ecMl7OUAYVx5fyTNjMrYVdtq ...
- Hibernate缓存之Aop+cache
在上一篇涉及到查询缓存的功能时除了需要在配置文件中开启缓存外,还需要在业务代码中显示调用setCacheable(boolean)才可以打开查询缓存的功能,这样做,无疑是破坏了封装性,所以就诞生了利用 ...
- SVN的服务器端用户权限配置
第一:用户的配置 SVN和apache整合的话,用户可以直接使用htpasswd dav_svn.passwd_file_address USERNAME来配置. 而账户的管理可以用dav_svn.a ...
- STM32 GPIO外部中断总结
一.STM32中断分组: STM32 的每一个GPIO都能配置成一个外部中断触发源,这点也是 STM32 的强大之处.STM32 通过根据引脚的序号不同将众多中断触发源分成不同的组,比如:PA0,PB ...
- 原生态jdbc的应用技术
为了更好的了解jdbc,最近查阅了前期学习的资料,整理归纳了一下,整理出来了一套jdbc常用的工具类.之所以在这里撰文,一来可以和大家共享技术的魅力,二来可以方便以后的查阅方便.以下是一个jdbc的优 ...
- css中怎么设置透明度的问题
小伙伴们是不是在找怎么样去设置页面的透明度的方法呢...别找了,我这儿就有,而且肯定够用了. 我自己会用到的就有两种,可以和大家分享一下. 1.用opcity的方法去设置透明度.代码如下: .div ...
- PYTHON学习之路_PYTHON基础（1）
学习内容: 1.Python介绍 2.Python程序初接触和变量 3.Python用户交互 4.Python数据类型 5.Python循环if...(elif)...else 6.Python循环w ...