【微信小程序】之单选框、radio-group、radio组件使用

你挚爱的强哥

已于 2023-05-31 10:07:35 修改

阅读量1.3w

点赞数 4

分类专栏：微信小程序 Sg.js框架文章标签： 1024程序员节微信小程序小程序单选框 radio

于 2021-10-24 20:06:40 首次发布

随意拷贝莫问题，但是有一点！请务必备注“你挚爱的强哥出品~么么哒”！

本文链接：https://blog.csdn.net/qq_37860634/article/details/120939437

版权

Sg.js框架同时被 2 个专栏收录

218 篇文章

订阅专栏

微信小程序

29 篇文章

订阅专栏

这篇博客介绍了如何在微信小程序中利用wxml和js实现radio-group的选择功能。通过绑定bindchange事件监听用户选择，并更新数据模型，展示了动态修改radio按钮选中状态的方法。

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

wxml

<radio-group bindchange="radioChange">
  <p style="margin-right:20rpx;align-items: center;" wx:for="{{radioItems}}" wx:key="*this">
    <radio style="margin-right:-10rpx;" id="radio{{index}}" value="{{item.value}}" checked="{{item.checked}}"  />
    <label for="radio{{index}}"> {{item.name}}</label>
  </p>
</radio-group>

Page({ 
  data: {
    radioItems: [
      {value: 1, name: '无线'},
      {value: 2, name: '年'},
      {value: 3, name: '月', checked: true},
      {value: 4, name: '天'},
    ]
    }, 
    radioChange(e) {
      console.log(e.detail.value)
      for (let i = 0, len = this.data.radioItems.length; i < len; i++) {
        var item= this.data.radioItems[i]
        item.checked =item.value == e.detail.value
      } 
      console.log( this.data.radioItems);
    }
})