好久没有写博客了，写一下刚学的

自己制作单选按钮，和复选框

//单选按钮

//源码

<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');
        }
    });