css3 写checkbox 标签单选框和实现类似于多选框的样式改写

实现单选框的效果：
"login-p">
    
        "checkbox" class="checkbox" checked="checked"/>
            "javascript:;">我已阅读并同意《xxx协议》   
    

css代码：
.form-box .login-p{
    margin: 1rem 0rem 1rem 0rem;
}
.form-box .login-p a{
    color: #555;
    font-size: 1.4rem;
}
.form-box .checkbox{
    -webkit-appearance: none;
        appearance: none;
        width: 1.3rem;
        height: 1.3rem;
        margin: 0;
        cursor: pointer;
        vertical-align: bottom;
        background: #E80000;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        top: -0.2rem;
}
input[type=checkbox]:checked::after {
        content: url(../img/right.png) ;
        display: block;
        position: absolute;
        left: 0.1rem;
        top: -.2rem;
}
运行结果如下:
![这里写图片描述](http://img.blog.csdn.net/20160906091750452)
要用到的图片:

![这是用到的rght.png图片](http://img.blog.csdn.net/20160906091934562)。
以上是单选框的写法。下面是用checkbox实现类似radio的标签功能.

html页面：
"bank-box">
  
"choose-p">
    "checkbox" class="checkbox"/>
    "text-span">"img/bank-02.png" class="bank-img">"small-em firstfont">（尾号"red-color">2120储蓄卡）
  
 
"clear code-p">
        "fl">验证码：
        "text" class="fl code-input" placeholder="短信验证码" />
        "fr time-span">获取验证码

"choose-p">
          "checkbox" class="checkbox"/>
        "text-span">"img/bank-01.png" class="bank-img">"small-em firstfont">（尾号"red-color">2120储蓄卡）

"clear code-p">
    "fl">验证码：
    "text" class="fl code-input" placeholder="短信验证码" />
    "fr time-span">获取验证码


css样式代码
.choose-p{
    height: 4.5rem;
    font-size: 1.6rem;
    line-height: 4.5rem;
    background: white;
    padding-left: 1rem;
    color: #333;
    border-bottom:  1px solid #D1D1D1;
}
.choose-p .small-em{
    color: #999;
    font-size: 1.4rem;
}
.form-box .checkbox{
       -webkit-appearance: none;
        appearance: none;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0;
        cursor: pointer;
        vertical-align: middle;
        border: 1px solid #D1D1D1;
        border-radius: .2rem;
        background: white;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        top: -0.2rem;
}
.form-box .text-span{
    margin-right: -.5rem;
}
input[type=checkbox]:checked::after {
        content: url(../img/right1.png) ;
        display: block;
        position: absolute;
}
html静态页面：
![这里写图片描述](http://img.blog.csdn.net/20160908151145040)


![这里写图片描述](http://img.blog.csdn.net/20160908151159547)
js代码 
$(".checkbox").click(function(){
       $(".code-p").hide();
       $(this).parent().siblings().find(".checkbox").attr("checked",false);
       $(this).parent().find(".checkbox").attr("checked",true);
        if($(this).is(":checked")){
             $(this).parent().next(".code-p").show().find(".time-span").click(function(){
                oSendBtn = $(this);
                oSendCodeNum = 60;
                oTime = 60;
                sendCodeTime();
             });
        }else{
            $(this).parent().next(".code-p").hide();
        }
    });
多个checkbox  只可以选择一个其中一个。