自定義的好看的單選復選框功能

如圖，和大家分享一下自定義的單選復選框，自己寫，不從網上找了。

前端的html頁面結構：

<div class="mutli">
                                    <ul>
                                        <li><input type="checkbox" id="1" class="checkAll"><label for="1">全選</label></li> 
                                        <li><input type="checkbox" id="2" class="checkItem"><label for="2">一級甲等</label></li> 
                                        <li><input type="checkbox" id="3" class="checkItem"><label for="3">一級乙等</label></li> 
                                        <li><input type="checkbox" id="4" class="checkItem"><label for="4">一級丙等</label></li> 
                                        <li><input type="checkbox" id="5" class="checkItem"><label for="5">二級甲等</label></li> 
                                        <li><input type="checkbox" id="6" class="checkItem"><label for="6">一級乙等</label></li> 
                                    </ul>
                                </div>
                                <div class="singleli">
                                    <ul>
                                        <li><input type="checkbox" id="11" class="singleItem"><label for="11">進口葯</label></li>
                                        <li><input type="checkbox" id="22" class="singleItem"><label for="22">國產葯</label></li>
                                        <li><input type="checkbox" id="33" class="singleItem"><label for="33">私營葯</label></li>
                                        <li><input type="checkbox" id="44" class="singleItem"><label for="44">公共葯</label></li>
                                        <li><input type="checkbox" id="55" class="singleItem"><label for="55">什么葯1</label></li>
                                        <li><input type="checkbox" id="66" class="singleItem"><label for="66">什么葯2</label></li>
                                    </ul>
                                </div>

<div class="multi"/>里面的是復選框布局，對應的下面的<div class="singleli"/>里是單選框布局。

下面貼上css

/*自定義多選框以及單選框樣式*/
.mutli li,.singleli li {
    float: left;
    margin-right: 6px;
}

.mutli input[type="checkbox"], .singleli input[type="checkbox"] {
    display: inline-block;
    width: auto;
}

.mutli label, .singleli label{
    vertical-align: middle;
    margin: 0px 5px 0px 0;
    padding: 3px 15px;
    border: 1px solid #eee;
    background-color: #fff;
    cursor: pointer;
    color: #006fbc;
    display: inline-block;
    margin-left: -18px;

}

.mutliArrow {
    border: solid 2px #1e99c7;
    padding: 2px 14px;
    background: url(../image/bottomArrow.png) no-repeat right bottom;
}

 

還有個背景圖     你右擊保存到桌面就可以了　　

接下來就是js了。

 //自定義復選框的點擊事件實現
                $(".mutli input:checkbox").click(function () {//自定義復選框的點擊事件
                    var _this = $(this),
                        label = _this.siblings("label");
                    label.hasClass('mutliArrow') ? label.removeClass('mutliArrow') : label.addClass('mutliArrow');//三目結構寫判斷
                    if (_this.hasClass("checkAll")) {//全選事件
                        var siblingsLis= _this.parent("li").siblings("li");
                        label.hasClass('mutliArrow') ? siblingsLis.find('input:not(":checked")').prop("checked", true).siblings('label').addClass('mutliArrow') : siblingsLis.find('input:checked').prop("checked", false).siblings('label').removeClass('mutliArrow');
                    } else {
                       $(".checkAll").removeAttr("checked").siblings("label").removeClass("mutliArrow");
                    }
                })
                //自定義單選框的點擊事件實現
                $(".singleli input:checkbox").click(function () {
                    var $this = $(this),
                        label = $this.siblings('label'),
                        siblingsLis = $this.parent('li').siblings('li');
                    label.hasClass('mutliArrow') ? label.removeClass('mutliArrow') : label.addClass('mutliArrow');
                    siblingsLis.find('input:checked').prop("checked", false).siblings('label').removeClass('mutliArrow');
                })

 

好了，自定義的好看的單選復選框小功能就算是完成了。

 

　　　　　　　　　　　　　　金木·晨         2017-06-06 15:51:11