小程序开发之组件radio（单项选择器）

radio-group

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

radio

单选项目

例如：
效果展示

代码
index.wxml

<view class="contentView">
  <view class="radio_title">radio单选框</view>
  <view class="radioView">
  <!-- 
    value   String    <radio> 标识。当该<radio> 选中时，<radio-group> 的 change 事件会携带<radio>的value  
    checked:false   当前是否选中  
    disabled:false  是否禁用  
    color   radio的颜色，同css的color   
    aria-label 无障碍访问，（属性）元素的额外描述 2.5.0
   -->
   
    <radio-group class="radio-group" bindchange="radioChange">
      <radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
        <text>{{item.value}}</text>
      </radio>
    </radio-group>
  </view>
</view>

index.wxss

.radio_title{
  margin-left: 20rpx;
  color: gray
}
.radioView{
  margin-top: 20rpx
}

.radio-group {
    border-bottom: 1px solid #ddd;
}
.radio {
    display: block;
    border-top: 1px solid #ddd;
    padding: 5px;
}

index.js

Page({
  data: {
    items: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'FRA', value: '法国' },
    ]
  },
  radioChange: function (e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)
  }
})

打印结果：radio发生change事件，携带value值为： CHN