實現單選框的效果：
<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  只可以選擇一個其中一個。