表单form美化之icheck (多选)

• 取得 icheck的 值

 $(".checkbox").click(function (event) {
                debugger;
                var alltype = $("#hidaddresstype").val();
                var currenttype = event.currentTarget.attributes["value"].nodeValue;
                if (alltype.indexOf(currenttype) < 0) {
                    if (alltype != "") {
                        alltype = alltype + ',' + currenttype;
                    } else {
                        alltype = currenttype;
                    }

                    $("#hidaddresstype").val(alltype);

                } else {
                    var char = ",";
                    if(alltype.indexOf(char)< 0)
                    {
                        $("#hidaddresstype").val("");
                    }else{
                        var arraytype=  alltype.split(',');
                        var addresstype="";
                        if(arraytype.length>0)
                        {
                            for (var i = 0; i < arraytype.length; i++) {
                                if(currenttype!=arraytype[i])
                                {
                                    if(addresstype!="")
                                    {
                                        addresstype=addresstype+","+arraytype[i];
                                    }else{
                                        addresstype=arraytype[i];
                                    }
                                }
                            }
                             $("#hidaddresstype").val(addresstype);
                        }
                    }
                   
                }

            });

 

• ichek html

　　　　　　　　　　　　　　　　　　　　　　　　<div class="multicheck">
                                           <label class="w-100"><font class="red">*</font>地址类型：</label>
                                           
                                            <div class="checkbox" name="AddressType" value="Bill" style="cursor: default;">
                                                <ins class="checked"></ins>
                                                <span>正本提单</span>
                                            </div>
                                           
                                            <div class="checkbox" name="AddressType" value="Invoice" style="cursor: default;">
                                                <ins class="checked"></ins>
                                                <span>业务发票</span>
                                            </div>
                                           
                                            <div class="checkbox" name="AddressType" value="Declaration" style="cursor: default;">
                                                <ins class="checked"></ins>
                                                <span>报关单提单</span>
                                            </div>
                                           
                                            <div class="checkbox" name="AddressType" value="Pick" style="cursor: default;">
                                                <ins class="checked"></ins>
                                                <span>提货地址</span>
                                            </div>
                                           
                                            <div class="checkbox" name="AddressType" value="Delivery" style="cursor: default;">
                                                <ins class=""></ins>
                                                <span>送货地址</span>
                                            </div>
                                           
                                            <div class="checkbox" name="AddressType" value="Other">
                                                <ins></ins>
                                                <span>其他</span>
                                            </div>
                                           
                                        </div>

 

icheck css

*{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; }

        .multicheck{width: 950px;}

icheck 插件 js

<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>

参考：www.cnblogs.com/kuikui/p/3506365.html