radio-group

单项选择器，内部由多个 <radio/> 组成。

属性名类型默认值说明
bindchangeEventHandle<radio-group/> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}

radio

单选项目

属性名类型默认值说明
valueString<radio/> 标识。当该 <radio/> 选中时，<radio-group/> 的 change 事件会携带 <radio/> 的 value
checkedBooleanfalse当前是否选中
disabledBooleanfalse是否禁用
colorColor#F0250Fradio 的颜色，同 css 的 color

示例代码

  1. <!--radio.jxml-->
  2. <view class="default-style">
  3.     <view class="default-style-text">默认样式</view>
  4.         <radio-group bindchange="changeDefaultStyle">
  5.             <label class="default-label1">
  6.                 <radio value="checkbox" color="{{color}}">checkbox</radio>
  7.             </label>
  8.             <label class="default-label2">
  9.                 <radio value="禁用选中" disabled="true" checked="true">禁用选中</radio>
  10.             </label>
  11.             <label class="default-label2">
  12.                 <radio value="禁用未选中" disabled="true">禁用未选中</radio>
  13.             </label>
  14.         </radio-group>
  15. </view>
  16. <view class="recommend-style">推荐展示的样式</view>
  17. <view class="recommend-container">
  18.         <radio-group bindchange="changeRecommend">
  19.             <label class="recommend-label" jd:for="{{recommendList}}" jd:key="index">
  20.                 <radio value="{{item.name}}" color="{{color}}">{{item.value}}</radio>
  21.             </label>
  22.         </radio-group>
  23. </view>
  24. <view class="recommend-style">有禁用的选中的radio</view>
  25. <view class="recommend-container">
  26.         <radio-group bindchange="changeDisabledRadio">
  27.             <label class="recommend-label">
  28.                 <radio value="radio1" color="{{color}}">radio1</radio>
  29.             </label>
  30.             <label class="recommend-label">
  31.                 <radio value="radio2" color="{{color}}">radio2</radio>
  32.             </label>
  33.             <label class="recommend-labels">
  34.                 <radio value="京东拍拍" disabled="true">京东拍拍</radio>
  35.             </label>
  36.         </radio-group>
  37. </view>
  1. //radio.js
  2. Page({
  3.   data: {
  4.     recommendList: [{ value: '京东到家', name: '京东到家' }, { value: '京东小易', name: '京东小易' }, { value: '京东拍拍', name: '京东拍拍' }],
  6.   changeDefaultStyle(e) { 
  7.    console.log('默认样式radio发生change事件，携带value值为：', e.detail.value)
  8.   },
  9.   changeRecommend(e) {
  10.    console.log('推荐展示的样式radio发生change事件，携带value值为：', e.detail.value)
  11.   },
  12.   changeDisabledRadio(e) {
  13.    console.log('有禁用的选中的radio发生change事件，携带value值为：', e.detail.value)
  14.   },
  15. })

radio - 图1