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

服务器端渲染项目"/>

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;}