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

实现单选框的效果：<p class="login-p">    <span>        <input type="checkbox" class="checkbox" checked="checked"/>            <a href="javascript:;">我已阅读并同意《xxx协议》</a>       </span></p>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页面：<div class="bank-box">  <p class="choose-p">    <input type="checkbox" class="checkbox"/>    <span class="text-span"><img src="img/bank-02.png" class="bank-img"><em class="small-em firstfont">（尾号<em class="red-color">2120</em>储蓄卡）</em></span>  </p> <p class="clear code-p">        <span class="fl">验证码：</span>        <input type="text" class="fl code-input" placeholder="短信验证码" />        <span class="fr time-span">获取验证码</span></p><p class="choose-p">          <input type="checkbox" class="checkbox"/>        <span class="text-span"><img src="img/bank-01.png" class="bank-img"><em class="small-em firstfont">（尾号<em class="red-color">2120</em>储蓄卡）</em></span></p><p class="clear code-p">    <span class="fl">验证码：</span>    <input type="text" class="fl code-input" placeholder="短信验证码" />    <span class="fr time-span">获取验证码</span></p></div><!--bank-box end-->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  只可以选择一个其中一个。