• 下载
  • 社区

radio 单选按钮

单选按钮。

扫码体验

qrcode for radio

效果示例

undefined

示例代码

<!-- API-DEMO page/component/radio/radio.axml -->
<view class="page">
  <view class="page-description">单选框</view>
  <view class="page-section">
    <view class="section section_gap">
      <form onSubmit="onSubmit" onReset="onReset">
        <view class="page-section-demo">
          <radio-group class="radio-group" onChange="radioChange" name="lib">
            <label class="radio" a:for="{{items}}" key="label-{{index}}">
              <radio value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
              <text class="radio-text">{{item.value}}</text>
            </label>
          </radio-group>
        </view>
        <view class="page-section-btns">
          <view><button size="mini" type="ghost" formType="reset">reset</button></view>
          <view><button size="mini" type="primary" formType="submit">submit</button></view>
        </view>
      </form>
    </view>
  </view>
</view>
// API-DEMO page/component/radio/radio.js
Page({
  data: {
    items: [
      { name: 'angular', value: 'AngularJS' },
      { name: 'react', value: 'React', checked: true },
      { name: 'polymer', value: 'Polymer' },
      { name: 'vue', value: 'Vue.js' },
      { name: 'ember', value: 'Ember.js' },
      { name: 'backbone', value: 'Backbone.js', disabled: true },
    ],
  },
  onSubmit(e) {
    my.alert({
      content: e.detail.value.lib,
    });
    console.log('onSubmit', e.detail);
  },
  onReset(e) {
    console.log('onReset', e);
  },
  radioChange(e) {
    console.log('你选择的框架是:', e.detail.value);
  },
});
/* API-DEMO page/component/radio/radio.acss */
.radio {
  display: block;
  margin-bottom: 20rpx;
}
.radio-text {
  line-height: 1.8;
}

属性

属性 类型 默认值 描述 最低版本
value String - 组件值,选中时 change 事件会携带的 value -
checked Boolean false 当前是否选中 -
disabled Boolean false 是否禁用 -
color String - radio 的颜色,同 CSS 色值 1.10.0

常见问题

radio 按钮嵌套 text 标签,为什么 text 内容不显示?

radio 按钮 与 text 标签不支持嵌套,支持平行关系。