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

最新推荐文章于 2024-07-25 16:45:46 发布

hekaijin_001

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量541

点赞数

分类专栏： jquery 文章标签： bootstrap jquery css

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

获取选中的勾选框：如这样的HTML代码：

html:
<div class="checkboxs" name="sport" value="basketball"><ins><input type="checkbox" style="display:none;" id="check" name="check_id" value="'+this.id+'"/></ins><span></span></div>

js: 
var priv_ids=[];
$(".checked").each(function(){    // 遍历每一个class为checked的复选框，其中选中的执行函数                  
priv_ids.push($.trim($(this).find("input").val()));    // 将选中的值的子节点input的value添加到数组priv_ids中    
});


全选/取消:
var classname=$("ins")[0].className;
if(classname=="checked"){
   $("ins").removeClass("checked")
}else {
   $("ins").addClass("checked");
}

hekaijin_001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
优化checkbox和radio，类似Bootstrap中的iCheck

checkbox和radio浏览器默认的已经满足不了大众的审美需求，更不用说浏览器之间的差异化，取而代之，优化checkbox和radio的方法也随之诞生了。html结构：单选框为例，简单说明：其中必需项包括：class=”radio” 和 name=”名称” <div class="radio" name="sex" value="boy"><ins></ins><span>帅哥</spa
复制链接

扫一扫

专栏目录