文章来源：https://www.toymoban.com/news/detail-617556.html
文章来源地址https://www.toymoban.com/news/detail-617556.html
wxml
<view bindtap='checkedTap'>
<radio checked="{{checked}}">设为默认</radio>
</view>wxss
<style lang="less" >
radio .wx-radio-input {
border-radius: 50%; /* 圆角 */
width: 24rpx;
border: 2rpx solid #5e5e5f;
height: 24rpx;
}
radio .wx-radio-input.wx-radio-input-checked {
border: none;
background: #c1885a;
}
radio .wx-radio-input.wx-radio-input-checked::before {
border-radius: 50%; /* 圆角 */
width: 28rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
height: 28rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
line-height: 28rpx;
text-align: center;
font-size: 20rpx; /* 对勾大小 30rpx */
color: #fff; /* 对勾颜色 白色 */
background: #c1885a;
transform: translate(-50%, -50%) scale(1);
}
</style>在点击事件中，通过取反即可实现选中与取消。
js
data: {
checked:true
},
//是否选中
checkedTap: function () {
this.setData({
"checked": !this.data.checked
})
},到了这里，关于微信小程序radio单选按钮选中与取消的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
