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

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

//单选按钮

//源码

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

        }

    });