微信小程序中如何操作radio单选框实现点击切换勾选状态？

本文共计363个文字，预计阅读时间需要2分钟。

前端使用input标签来写radio，小程序中使用radio标签+单选框样式。1. 自定义radio样式、wx默认的是真的丑+单选框样式 *单选框样式* *初始样式* radio.wx-radio-input{ width: 32rpx; height: 32rpx; border-radius: 50%; }

前端使用input 来写radio,小程序使用radio标签 也可以使用<radio />单标签

1.自定义radio样式、

wx默认的是真的丑

/* 单选框样式 */ /* 初始样式 */ radio .wx-radio-input{ width: 32rpx; height: 32rpx; border-radius: 0 } /* 选中后的 背景样式 （ 背景 边框 ） */ radio .wx-radio-input.wx-radio-input-checked{ width: 32rpx; /* 选中后对勾大小，不要超过背景的尺寸 */ height: 32rpx; /* 选中后对勾大小，不要超过背景的尺寸 */ background:white!important; } /* 选中后的 对勾样式 */ radio .wx-radio-input.wx-radio-input-checked::before{ width: 32rpx; /* 选中后对勾大小，不要超过背景的尺寸 */ height: 32rpx; /* 选中后对勾大小，不要超过背景的尺寸 */ line-height: 32rpx; text-align: center; font-size:36rpx; /* 对勾大小 */ color:black; /* 对勾颜色 */ background: white; transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); }

2.单选打勾再选打勾取消效果

wxml:

<radio checked='{{check}}' id="radios" bindtap='radiocon'></radio><label for="radios">匿名</label>

wx.js

//这条代码在data里写 check:false radiocon:function(e){ this.setData({ check: !this.data.check }) console.log("用户打勾的是 ",this.data.check) },

这样 就完成了单击打勾再击取消。

以上。