checkbox 选中与未选中状态 来自米蒙服务器端渲染项目

1、效果

2、html代码片段

    <div class="pay_style">
        <h5>请选择支付方式</h5>
        <label class="b-b noflex clearfix relative" for="zfb">
            <div class="fl">
                <img src="~static/images/zfb.png" alt="">
                <span class="m-l-xs">支付宝支付</span>
            </div>
            <div class="fr">
                <input type="checkbox" hidden checked id="zfb">
                <i class="z_c"></i>
            </div>
        </label>
        <label class="noflex clearfix relative" for="wx">
            <div class="fl">
                <img src="~static/images/wx.png" alt="">
                <span class="m-l-xs">微信支付</span>
            </div>
            <div class="fr">
                <input type="checkbox" hidden id="wx">
                <i class="z_c"></i>
            </div>
        </label>
        <div class="affirm">
            <van-button @click.native="$router.push('/goods/paySuccess-mi')" type="primary">确认支付</van-button>
        </div>
    </div>

3、css相关代码

.pay_style .noflex{
            height: 40px;
            line-height: 40px;
            display: block;
        }
		/*未选中状态的图片*/
		.pay_style .z_c{
		    position: absolute;
		    width: 12px;
		    height: 12px;
		    right: 0px;
		    top: 15px;
		    background-position: center;
		    background-repeat: no-repeat;
		    background-image: url("../../static/images/no_checked2.png")
		}
		/*选中状态的图片*/
		.pay_style input[type=checkbox]:checked + .z_c{
		    background-image: url("../../static/images/checked2.png");
		 }
		.pay_style{
	        background: #fff;
	        padding: 5px 10px;
          ｝
        .pay_style h5{
           font-weight: normal;
           font-size: 14px; 
           margin-bottom: 5px;
        }