微信小程序如何实现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,
    }); 
  }, 
posted @ 2020-12-17 12:11  gain  阅读(893)  评论(0编辑  收藏  举报