微信小程序——radio组件

最新推荐文章于 2025-06-20 23:44:18 发布

Kinggitte

最新推荐文章于 2025-06-20 23:44:18 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/wqwweerrtyy/article/details/79036172

本文介绍了一个使用WXML和JavaScript实现的简单交互案例。通过一个radio-group组件演示了如何在小程序中设置和监听radio按钮的选择状态，并在控制台打印所选按钮的name值。此案例展示了view标签在WXML中的应用及如何通过wx:for循环遍历数组来构建界面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

a.js

没啥可说的，单纯的数据罗列

data: {
  array: [
    { name: '1', value: 'select 1', checked: 'true' },
    { name: '2', value: 'select 2' },
    { name: '3', value: 'select 3' },
    { name: '4', value: 'select 4' },
    { name: '5', value: 'select 5' },
  ]
},
/* radio监听事件,console中会返回name值*/
listenerRadioGroup: function (e) {
  console.log(e.detail.value);
}

a.wxml

view标签可以用label标签替代

<!--监听器-->
<radio-group bindchange="listenerRadioGroup">
    <view wx:for="{{array}}">
        <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
    </view>
</radio-group>