自定义的好看的单选复选框功能

如图，和大家分享一下自定义的单选复选框，自己写，不从网上找了。

前端的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