微信小程序如何实现radio单选框单击打勾和取消

自定义radio样式

/* 单选框样式 */
   /* 初始样式 */
 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);
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的微信小程序单选框示例,当用户勾选选项时,会在控制台输出对应的值: ```html <view class="radio-group"> <label class="radio" bindtap="radioChange" data-value="option1"> <view class="radio__icon"></view> <view class="radio__label">选项1</view> </label> <label class="radio" bindtap="radioChange" data-value="option2"> <view class="radio__icon"></view> <view class="radio__label">选项2</view> </label> <label class="radio" bindtap="radioChange" data-value="option3"> <view class="radio__icon"></view> <view class="radio__label">选项3</view> </label> </view> ``` ```css .radio-group { display: flex; flex-direction: column; } .radio { display: flex; align-items: center; margin-bottom: 12px; } .radio__icon { width: 18px; height: 18px; border: 1px solid #999; border-radius: 50%; margin-right: 8px; } .radio__label { font-size: 16px; } .radio__icon.checked { background-color: #007aff; border-color: #007aff; } ``` ```javascript Page({ data: { selectedValue: '' }, radioChange: function(event) { const value = event.currentTarget.dataset.value; console.log('选中的值为:', value); this.setData({ selectedValue: value }); } }); ``` 在上面的示例中,我们首先创建了一个包含三个选项的单选框组,每个选项都是一个 `label`,并绑定了 `bindtap` 事件。当用户点击某个选项时,会触发 `radioChange` 函数,该函数会获取选项的值,并将其打印到控制台。我们还定义了一个 `selectedValue` 变量来保存用户选择的值。选项的样式可以根据自己的需求进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值