优化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：

posted @   前端咖  阅读(44273)  评论(12)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
历史上的今天：
2012-01-05 一步一步理解拖拽Drag（二）
点击右上角即可分享
微信分享提示
AI IDE Trae