字節(jié)跳動小程序開發(fā)組件文檔 radio-group

單項選擇器，內(nèi)部由多個組成。

radio

單選項目

示例

開發(fā)者工具中預覽

<view class="container">

  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">默認樣式</view>
      <label class="radio">
        <radio value="r1" checked="true"/>選中
      </label>
      <label class="radio">
        <radio value="r2" />未選中
      </label>
    </view>


    <view class="page-section">
      <view class="page-section-title">推薦展示樣式</view>
      <view class="page-cells page-cells_after-title">
        <radio-group bindchange="radioChange">
          <label class="page-cell page-check__label" :for="{{items}}" :key="{{item.value}}">

            <view class="page-cell__hd">
              <radio value="{{item.value}}"
                checked="{{ item.checked }}"/>
            </view>
            <view class="page-cell__bd">{{item.name}}</view>
          </label>
        </radio-group>
      </view>
    </view>
  </view>

</view>

Page({
  data: {
    items: [
      {value: 'xigua', name: '西瓜視頻'},
      {value: 'toutiao', name: '今日頭條', checked: 'true'},
      {value: 'huoshan', name: '火山小視頻'},
      {value: 'douyin', name: '抖音'},
      {value: 'duanzi', name: '內(nèi)涵段子'},
      {value: 'flipgaram', name: 'Flipagram'},
    ]
  },
  radioChange: function(e) {
    console.log('Radio 發(fā)生 change 事件，value 值為：', e.detail.value)

    var items = this.data.items;
    for (var i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value == e.detail.value
    }

    this.setData({
      items: items
    });
  }
})