优化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:;height: 24px; line-height: 24px; margin-right: 20px;}

        .checkbox ins,.radio ins{display: inline-block;*display: inline;*zoom:; 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:;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>

运行代码

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

bootstrap 中的 iCheck 全选反选功能的实现
喜欢bootstrap 风格的同学应该知道,iCheck的样式还是很好看的. 官网: http://www.bootcss.com/p/icheck/ 进入正题,iCheck提供了一些方法,可以进行全 ...
Jquery中的checkbox 及radio的问题
在web开发中,我们经常会对checkbox和radio进行读写操作,下面我来分享一下我的项目中的相关案例: 一.checkbox <input id="check1" cl ...
24Flutter中常见的表单有TextField单行文本框，TextField多行文本框、CheckBox、Radio、Switch
一.Flutter常用表单介绍: CheckboxListTile.RadioListTile.SwitchListTile.Slide. 二.TextField:表单常见属性: maxLines:设 ...
二十四、小程序中改变checkbox和radio的样式
来源:https://blog.csdn.net/qq_39364032/article/details/79742415 在微信小程序里面,有时候为了配合整个项目的风格,checkbox和radio ...
html自定义checkbox、radio、select —— select篇
上一篇<html自定义checkbox.radio.select —— checkbox.radio篇>介绍了我们是怎么将 html 自带的 checkbox.radio 改成我们自定义的 ...
html自定义checkbox、radio、select —— checkbox、radio篇
前些日子,所在公司项目的UI做了大改,前端全部改用 Bootstrap 框架,Bootstrap的优缺点在此就不详述了,网上一大堆相关资料. 前端的设计就交给我和另一个同事[LV,大学同班同学,毕业后 ...
Css实现checkbox及radio样式自定义
前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...
bootstrap课程5 bootstrap中的组件使用的注意事项是什么
bootstrap课程5 bootstrap中的组件使用的注意事项是什么一.总结一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...
参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

随机推荐

Service完全解析(转)
今天我们来讲一下Android中Service的相关内容. Service在Android中和Activity是属于同一级别上的组件,我们可以将他们认为是两个好哥们,Activity仪表不凡,迷倒万千 ...
yii2 html下拉框
下拉框带默认值 <?php $form=ActiveForm::begin(); echo $form->field($model,'uname', ['inputOptions'=&g ...
invalid initialization of non-const reference of type与discards qualifiers
参数传递函数参数的传递是初始化语义:用调用者的实参去初始化函数的形参,如果参数是对象,需要调用该类的拷贝构造函数,如果没有显式定义的拷贝构造函数,则执行默认的按成员拷贝 ...
【初识——最大流】 hdu 1532 Drainage Ditches（最大流） USACO 93
最大流首次体验感受—— 什么是最大流呢? 从一个出发点(源点),走到一个目标点(汇点),途中可以经过若干条路,每条路有一个权值,表示这条路可以通过的最大流量. 最大流就是从源点到汇点,可以通过的最大流 ...
ylb：exists（存在）的应用实例
ylbtech-SQL Server:exists(存在)的应用实例 SQL Server exists(存在)的应用实例. 1,exists(存在)的应用实例返回顶部 -- =========== ...
<转>揭秘DNS后台文件：DNS系列之五
揭秘DNS后台文件在前面的博文中我们介绍了DNS的体系结构,常用记录,还介绍了辅助服务器的配置,今天我们来介绍一下DNS服务器背后的几个文件.其实DNS服务器的工作完全依靠这几个文件,了解了DNS的 ...
【DWT笔记】傅里叶变换与小波变换
[DWT笔记]傅里叶变换与小波变换一.前言我们经常接触到的信号,正弦信号,余弦信号,甚至是复杂的心电图.脑电图.地震波信号都是时域上的信号,我们也成为原始信号,但是通常情况下,我们在原始信号中得到 ...
wifi reaver
PIN码的格式很简单, 八位十进制数,最后一位(第8位)为校验位(可根据前7位算出),验证时先检测前4位,如果一致则反馈一个信息,所以只需1万次就可完全扫描一遍前4位,前4位确定下来的话,只需再试10 ...
记录一下JS正则的坑
JS正则的单行模式有点问题总之 . 符号匹配换行符号会有问题暂时的解决方案是 html = html.replace(/[\r\n]/g,""); 附加一个 html = ht ...
vmware10中开启Intel VT-x
记得刚接触linux的时候,是在win7下使用vmware虚拟机来安装linux,这样就可以方便的一边使用win7娱乐,一边在linux下进行学习.后来发现这种方式使得win7很卡,虚拟机也很卡,让人 ...

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

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

随机推荐

热门专题