微信小程序radio单选按钮选中与取消

wxml

<view bindtap='checkedTap'> <radio checked="{{checked}}">设为默认</radio> </view>

wxss

/* 自定义 radio 样式 */ radio .wx-radio-input{ border-radius: 50%; width: 28rpx; height: 28rpx; } /* 选中后的样式 （可根据需求自己修改） */ radio .wx-radio-input.wx-radio-input-checked::before{ border-radius: 50%; width: 44rpx; height: 44rpx; line-height: 44rpx; text-align: center; font-size: 28rpx; /* 对勾大小 */ color:#fff; /* 对勾颜色 */ background: #2facff; border-color: #2facff; }

js

data: { checked:true }, //是否选中 checkedTap: function () { this.setData({ "checked": !this.data.checked }) },

原理

1.在wxml的radio中，有一个选中状态的赋值，checked="{{checked}}" ， 给绑定点击事件checkedTap。

2.接着在data中，声明checked为true。

3.然后在点击事件中，通过取反即可实现选中与取消。