2023年微信小程序表单组件单选框 radio
作者: --时间: 2025-07-25 11:05:47
阅读量:
微信小程序表单组件单选框radio可以用于实现单项选择器,内部由多个1.
2.
<radio/>
组成的功能。在微信小程序中,使用<radio-group/>
标签来实现单选框的功能。以下是一些关键属性的说明:
1. <radio-group/>
属性
bindchange
:
当<radio-group/>
中选中的<radio/>
发生变化时,会触发change
事件。需要设置事件处理函数,在事件处理函数中可以通过e.detail.value
获取选中的<radio/>
的value值。
2. <radio/>
属性
value
:
<radio/>
的标识,当该<radio/>
选中时,<radio-group/>
的change事件会携带<radio/>
的value值。checked
:
当前是否选中,默认为false。disabled
:
是否禁用,默认为false。color
:
<radio/>
的颜色,同css的color。
参考代码
在微信小程序中,可以通过以下代码来使用单选框:
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
Page({
data: {
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'TUR', value: '法国'},
]
},
radioChange: function(e) {
console.log('radio发生change事件,携带value值为:', e.detail.value)
}
})
其中data
定义了<radio/>
中需要渲染的数据信息,包括每个选项的name
和value
以及默认选中项的状态checked
。radioChange
函数用于处理<radio-group/>
的change
事件,获取选中项的value
值。
-
B2B2C多用户商城系统支持企业自营与商户入驻模式共存 会员一站式精细化营销工具 多用户分销,带来爆发式增长
系统支持平台自营+供应商店铺共存的经营模式(类天猫&京东模式),帮助企业打造生态级商业平台为目的的电子商务系统。
免费试用系统 -
B2B2B电商交易系统优化供应链协作 授信及账期支付 商品按照数量阶梯设价
全渠道订货/采购及经销商管理数字化系统,实现供应链整合和交易便捷化。
免费试用系统 -
S2B2B电商交易系统供销一体化,提高市场集中度 集团管控一体化,有效实现供需匹配 移动应用一体化,提高运营综合效率
上下游资源整合数字化解决方案,赋能产业供应链,构建产业互联网生态体系。
免费试用系统

更多产品任你选