自己制作单选按钮,和复选框
//单选按钮
//源码
<ul class="radio-group">
<li>
<span class="radio radio-checked">每天</span>
</li>
<li>
<span class="radio">法定工作日</span>
</li>
<li>
<span class="radio">法定节假日</span>
</li>
<li>
<span class="radio r-radio">指定星期</span>
</li>
<li>
<span class="radio">指定日期</span>
</li>
</ul>
//样式
.radio{
padding-left:1.2rem;
position:relative;
margin-left:.3rem;
}
.radio:first-child{
margin-left:0;
}
.radio:before{
content:'';
display:block;
width:10px;
height:10px;
border-radius:100%;
border:2px solid #DDDFE2;
position:absolute;
left:0;
top:2px;
}
.radio-checked:before{
border-color:#1E92F3;
}
//js事件
$('.radio').click(function(e) {
$(this).parents('.radio-group').find('.radio').removeClass('radio-checked');
$(this).addClass('radio-checked');
//指定星期
if($(".r-radio").hasClass("radio-checked")){
$(".checkboxs").addClass('checkbox-checked');
}else{
$(".checkboxs").removeClass('checkbox-checked');
}
});
//复选框
//源码
<ul class="checkbox-group">
<li>
<span class="checkboxs">星期一</span>
</li>
<li>
<span class="checkboxs">星期二</span>
</li>
<li>
<span class="checkboxs">星期三</span>
</li>
<li>
<span class="checkboxs">星期四</span>
</li>
<li>
<span class="checkboxs">星期五</span>
</li>
<li>
<span class="checkboxs">星期六</span>
</li>
<li>
<span class="checkboxs">星期日</span>
</li>
</ul>
//样式
.checkboxs{
padding-left:1.2rem;
position:relative;
margin-left:.3rem;
}
.checkboxs:first-child{
margin-left:0;
}
.checkboxs:before{
content:'';
display:block;
width:14px;
height:15px;
line-height: 16px;
border:2px solid #DDDFE2;
position:absolute;
left:0;
top:0;
}
.checkbox-checked:before{
content: '√';
background-color: #1E92F3;
border:2px solid #1E92F3;
color: #fff;
}
//js事件
$('.checkboxs').click(function(e) {
if($(this).hasClass('checkbox-checked')){
$(this).removeClass('checkbox-checked');
}
else{
$(this).addClass('checkbox-checked');
}
});