如果你下定决心要改变现有的默认的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');       
  });

checkbox和radio的样式美化问题的更多相关文章

  1. 论checkbox和radio的样式美化问题

    如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对 ...

  2. 巧用CSS3伪类选择器自定义checkbox和radio的样式

    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...

  3. 二十四、小程序中改变checkbox和radio的样式

    来源:https://blog.csdn.net/qq_39364032/article/details/79742415 在微信小程序里面,有时候为了配合整个项目的风格,checkbox和radio ...

  4. 微信小程序开发——修改小程序原生checkbox、radio默认样式

    复选框: 闲话少说,这里直接介绍如何修改小程序提供的复选框的样式,如原生的是这样的: 需要的是这样的: 示例代码: /*复选框外框样式*/ checkbox .wx-checkbox-input { ...

  5. Css实现checkbox及radio样式自定义

    前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...

  6. input美化 checkbox和radio样式

    input美化    checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...

  7. 自定义表单样式之checkbox和radio

    1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都 ...

  8. HTML的checkbox和radio的美化

    checkbox和radio的美化 checkbox: <style type="text/css"> input[type="checkbox"] ...

  9. css设置移动端checkbox和radio样式

    复选框Checkbox是Web应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览 ...

随机推荐

  1. linux脚本之简单实例

    利用脚本计算10的阶乘 简单说明一下: #!/bin/bash说明该shell使用的bash shell程序.这一句不可少for i in `seq 1 10`还可以写成for i in 1 2 3 ...

  2. hdu 1116 Play on Words（欧拉通路）

    Problem Description Some of the secret doors contain a very interesting word puzzle. The team of arc ...

  3. Centos下需安装Pytnon，Pytharm

    1.在www.python.org/PIPY/下载python3.4.2.tar.gz 2.在安装之前最好先安装相关的开发工具 # yum groupinstall develtools # yum ...

  4. php排序算法之选择排序

    /** * 选择排序 * 不稳定排序 *工作原理: 首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾.以此类推 ...

  5. golang高级部分

    一.golang之OOP(orient object programming) 在函数声明时, 在其名字之前放上一个变量, 即是一个方法. 这个附加的参数会将该函数附加到这种类型上, 即相当于为这种类 ...

  6. VS2015 企业版不支持 JavaScript 语法高亮、智能提醒

    2015年7月,微软终于放出了 Visual Studio 2015 正式版,博主安装了 Visual Studio 2015 企业版之后,居然不支持 JavaScript 的语法高亮.智能提醒功能, ...

  7. 关于js对象值的传递

    结合红宝书和网上的一些文章,记录下自己对关于js对象的值的传递的一些理解. js对象是保存在堆内存中的,当把对象赋值给变量时,是把对象在堆内存的引用(地址)赋值给了变量,变量通过地址来访问对象.下面来 ...

  8. mac 桌面美化

    官网:Übersicht 先来大图:  当然,,,我自己的这个还不成型,去官网看看吧,有大神们做好的各种主题可选哦~ 像这样1: 这样2: 甚至这样3:(酷毙了有木有..)        Downlo ...

  9. GetProcessIdOfThread在WinXP及之前操作系统的替代实现

    还是学习VLD2.X版本看到的: 在Windows XP及之前的操作系统没有提供GetProcessIdOfThread的API,这里给出了一个替代的实现方式: 头文件: #if _WIN32_WIN ...

  10. go learning notes

    1)  cgo $go install test.go # command-line-arguments /usr/bin/ld: unrecognized option '--build-id=no ...