微信小程序如何实现radio单选框单击打勾和取消(单个单选框)
wxml
<radio-group>
<radio class="wx-radio-input" checked="{{checked}}" name="def" value="{{info.is_default}}" bindtap="checked" />默认地址
</radio-group>
未选中样式和选中样式
radio .wx-radio-input {
/* 自定义样式.... */
height: 35rpx;
width: 35rpx;
margin-top: -4rpx;
border-radius: 50%;
background: transparent;
background: #BFBFBF;
}
radio .wx-radio-input.wx-radio-input-checked {
background: #FEAFC2 !important;
border-color:#FEAFC2 !important;
}
radio .wx-radio-input.wx-radio-input-checked::before {
width: 28rpx;
height: 28rpx;
line-height: 28rpx;
text-align: center;
font-size: 28rpx;
color: #fff;
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1)
}
js
data: {
checked:false
},
checked: function(e) {
this.setData({
"checked": !this.data.checked,
});
},