优化checkbox和radio，类似Bootstrap中的iCheck

checkbox和radio浏览器默认的已经满足不了大众的审美需求，更不用说浏览器之间的差异化，取而代之，优化checkbox和radio的方法也随之诞生了。

html结构：
单选框为例，简单说明： 
其中必需项包括：class="radio"
和 name="名称"


<div class="radio" name="sex" value="boy"><ins></ins><span>帅哥</span></div>

<div class="radio" name="sex" value="girl"><ins></ins><span>靓妹</span></div>

<div class="radio" name="sex" value="unsex"><ins class="disabled"></ins><span>未选中不可点击</span></div>

<div class="radio" name="sex" value="sexed"><ins class="enable"></ins><span>选中不可点击</span></div>

css表现：
transition介绍：元素从一种样式逐渐改变为另一种的效果。

transition 简写属性，用于在一个属性中设置四个过渡属性。 
transition-property 规定应用过渡的 CSS
属性的名称。 
transition-duration 定义过渡效果花费的时间。默认是
0。 
transition-timing-function 规定过渡效果的时间曲线。默认是
"ease"。 
transition-delay 规定过渡效果何时开始。默认是 0。

.checkbox,.radio{display: inline-block;*display: inline;*zoom:1;height: 24px;
line-height: 24px; margin-right: 20px;}
.checkbox ins,.radio ins{display:
inline-block;*display: inline;*zoom:1; width: 23px; height: 22px;
vertical-align: middle; background:
url(http://www.bootcss.com/p/icheck/skins/square/blue.png) no-repeat;
margin-right: 8px; -webkit-transition:all 0.1s linear; -moz-transition:all 0.1s
linear; -o-transition:all 0.1s linear; -ms-transition:all 0.1s linear;
transition:all 0.1s linear;vertical-align: middle;}
.radio
ins{background-position: -120px 0px; }
.radio .hover{background-position:
-144px 0px;}
.radio .checked{background-position: -168px 0px;}
.radio
.enable{background-position: -214px 0px;}
.radio
.disabled{background-position: -191px 0px;}
.checkbox span,.radio
span{display: inline-block;*display: inline;*zoom:1;vertical-align: middle;
}

js代码：
点击事件，鼠标移入移出事件，备注：移动端仅支持点击即可。
点击事件为例：document.on("click",".radio",function(){...})


click: function(elem) {

    var _this = this;

    elem = "." + elem;

    $(document).on("click", elem, function() {

        var $this = $(this),

            _ins = $this.find("ins");

        if (!(_ins.hasClass(_this._disabled) || _ins.hasClass(_this._enable))) {

            if ( !! _ins.hasClass(_this._checked)) {

                _ins.removeClass(_this._checked).addClass(_this._hover);

            } else {

                if (/radio/ig.test(elem)) {

                    var _name = $this.attr("name");

                    $(elem + "[name=" + _name + "]").find("ins").removeClass(_this._checked);

                }

                $(elem).find("ins").removeClass(_this._hover);

                _ins.addClass(_this._checked);

            }

        }

    });

}

DEMO：


<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>仿checkbox和radio类似Bootstrap中的iCheck</title>

    <style>

        *{margin:0px;padding:0px;}

        .checkbox,.radio{display: inline-block;*display: inline;*zoom:1;height: 24px; line-height: 24px; margin-right: 20px;}

        .checkbox ins,.radio ins{display: inline-block;*display: inline;*zoom:1; width: 23px; height: 22px; vertical-align: middle; background: url(http://www.bootcss.com/p/icheck/skins/square/blue.png) no-repeat; margin-right: 8px; -webkit-transition:all 0.1s linear; -moz-transition:all 0.1s linear; -o-transition:all 0.1s linear; -ms-transition:all 0.1s linear; transition:all 0.1s linear;vertical-align: middle;}

        .checkbox ins{background-position: 0px 0px; }

        .radio ins{background-position: -120px 0px; }

        .checkbox .hover{background-position: -24px 0px; }

        .checkbox .checked{background-position: -48px 0px; }

        .checkbox .enable{background-position: -96px 0px;}

        .checkbox .disabled{background-position: -72px 0px;}

        .radio .hover{background-position: -144px 0px;}

        .radio .checked{background-position: -168px 0px;}

        .radio .enable{background-position: -214px 0px;}

        .radio .disabled{background-position: -191px 0px;}

        .checkbox span,.radio span{display: inline-block;*display: inline;*zoom:1;vertical-align: middle; }


.sport,.sex{width: 950px; margin: 100px auto;}

    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

</head>

<body>

    <div class="sport">

        <div class="checkbox" name="sport" value="basketball"><ins></ins><span>篮球</span></div>

        <div class="checkbox" name="sport" value="football"><ins></ins><span>足球</span></div>

        <div class="checkbox" name="sport" value="volleyball"><ins></ins><span>排球</span></div>

        <div class="checkbox" name="sport" value="unsport"><ins class="disabled"></ins><span>未选中不可点击</span></div>

        <div class="checkbox" name="sport" value="sported"><ins class="enable"></ins><span>选中不可点击</span></div>

    </div>

    <div class="sex">

        <div class="radio" name="sex" value="boy"><ins></ins><span>帅哥</span></div>

        <div class="radio" name="sex" value="girl"><ins></ins><span>靓妹</span></div>

        <div class="radio" name="sex" value="unsex"><ins class="disabled"></ins><span>未选中不可点击</span></div>

        <div class="radio" name="sex" value="sexed"><ins class="enable"></ins><span>选中不可点击</span></div>

    </div>

    <script>

        (function($) {

            $.icheck = {

                init: function() {

                    var _this = this;

                    _this._checkbox = "checkbox";

                    _this._radio = "radio";

                    _this._disabled = "disabled";

                    _this._enable = "enable";

                    _this._checked = "checked";

                    _this._hover = "hover";

                    _this._arrtype = [_this._checkbox, _this._radio];

                    _this._mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent);

                    $.each(_this._arrtype, function(k, v) {

                        _this.click(v);

                        if(!_this._mobile){

                            _this.mouseover(v);

                            _this.mouseout(v);

                        }

                    });

                },

                click: function(elem) {

                    var _this = this;

                    elem = "." + elem;

                    $(document).on("click", elem, function() {

                        var $this = $(this),

                            _ins = $this.find("ins");

                        if (!(_ins.hasClass(_this._disabled) || _ins.hasClass(_this._enable))) {

                            if ( !! _ins.hasClass(_this._checked)) {

                                _ins.removeClass(_this._checked).addClass(_this._hover);

                            } else {

                                if (/radio/ig.test(elem)) {

                                    var _name = $this.attr("name");

                                    $(elem + "[name=" + _name + "]").find("ins").removeClass(_this._checked);

                                }

                                $(elem).find("ins").removeClass(_this._hover);

                                _ins.addClass(_this._checked);

                            }

                        }

                    });

                },

                mouseover: function(elem) {

                    var _this = this;

                    elem = "." + elem;

                    $(document).on("mouseover", elem, function() {

                        var $this = $(this);

                        var _ins = $this.find("ins");

                        if (!(_ins.hasClass(_this._disabled) || _ins.hasClass(_this._enable) || _ins.hasClass(_this._checked))) {

                            _ins.addClass(_this._hover);

                            $this.css("cursor","pointer");

                        } else{

                            $this.css("cursor","default");

                        }

                    });

                },

                mouseout: function(elem) {

                    var _this = this;

                    elem = "." + elem;

                    $(document).on("mouseout", elem, function() {

                        $(elem).find("ins").removeClass(_this._hover);

                    });

                }

            };


$.icheck.init();


})(jQuery);

    </script>

</body>

</html>

运行代码

时间： 2024-11-05 11:44:52

优化checkbox和radio，类似Bootstrap中的iCheck的相关文章

Jquery中的checkbox 及radio的问题

在web开发中,我们经常会对checkbox和radio进行读写操作,下面我来分享一下我的项目中的相关案例: 一.checkbox <input id="check1" class="othercheck" type="checkbox" name="othercheck" value="1">1 1.判断单个已知checkbox是否选中 var ischeck=$("#check1&

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

由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的checkbox和radio,然后用js实现选中和未选中时候的样式,用来模拟checkbox和radio. 例如这种: 用其他元素模拟(以checkbox为例): <div class='checkbox'></div> $('.checkbox').click(function(){

Bootstrap中的less基础

在线编译 因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到.比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有两个框,左侧输入less,右侧呈现编译的 css,方便在线学习和测试. 修改 bootstrap 中的 less 如下图,入口文件是 bootstrap.less 和 responsive.less 文件—— 这个入口文件 bootstrap.less 是这样引用其他 less 文件的: 了解这份

Jquery 操作Html 控件 CheckBox、Radio、Select 控件

在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一个全面的代码总结. 一.Jquery 对 CheckBox 的操作: <input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox&q

自定义checkbox， radio样式总结

任务目的 深入了解html label标签 了解CSS边框.背景.伪元素.伪类(注意和伪元素区分)等属性的设置 了解CSS中常见的雪碧图,并能自己制作使用雪碧图 任务描述 参考 样例(点击查看),实现页面开发,要求实现效果基本一致 任务注意事项 尝试背景图和伪元素两种不同方式实现,对比两种方式各自的优缺点. 注意测试不同情况,尤其是极端情况下的效果. 参考资料 MDN label: 了解html中label的基本知识 MDN background-position: 了解背景图片定位相关知识 M

自定义checkbox， radio样式

17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color.border等属性都对其无效. 但是本身的样式又不太美观: 本身的radio外观:本身的checkedbox外观. 不能改样式,却又如此的不美观,实在不符合我们现在的审美和需求. 这是百度给的一个样式图片: 首先,HTML: <div> <input type="radio&quo

[ HTML5 表单样式 checkbox | radio ] 自定义checkbox 与radio样式实现思路

自定义checkbox 与radio样式实现思路: 1.隐藏原生的input选框  2.自定义新的选框  3.并通过CSS或JS控制切换是否选中的状态 声明:转载自网络,本人只作为学习之用,如果原作者发现(觉着)有侵权意图敬请联系本人,删除或修改,本人尊重原文作者的劳动并对原文作者的分享表示感谢和敬意... 分析原理: 实现 1.结构:用label绑定input,推荐使用label包裹input,以减少不必要的id: 2.样式:隐藏input标签,为label添加背景或使用其他小标签(<i>&

Bootstrap中六种表格样式

表格 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格.在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用. 同样的,如果你对CSS预处理器熟悉,你可以使用Bootstrap提供的预处理版本: ?  LESS版本,对应的文件是 tables.less ?  Sass版本,对应的文件是 _tables.scss 如果你不懂LESS

jQuery实现自定义checkbox和radio样式

jQuery实现自定义checkbox和radio样式 1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都知道在写结构的时候,radio或checkbox都会跟随label一起使用,label的for属性值和input的id值相同的情况下,点击label就可以选中input,这里正是利用label 来覆盖我们的input默认样式,通过给label添