微信小程序入门（十）：组件checkbox/radio

checkbox就是所谓的多选框，在使用时需要配合checkbox-group，于此同时radio，单选按钮，与之配合是radio-group，现就针对这两个组件进行属性的介绍：

checkbox

• value：<checkbox>标识，选中时触发<checkbox-group>的 change 事件，并携带 <checkbox> 的 value

• disabled ：是否禁用

• checked ：当前是否选中，可用来设置默认选中

• color ：checkbox的颜色，同css的color

radio

• value：<radio> 标识。当该<radio> 选中时，<radio-group> 的 change 事件会携带<radio>的value

• checked：当前是否选中

• disabled：是否禁用

• color：radio的颜色，同css的color

列举完属性，就撸一把代码：
wxml:

<view class='container'>

  <text class='title'>radio</text>
  <radio-group class="radio-group" bindchange="radioChange">
    <label class="radio" wx:for="{{items}}">
      <radio value="{{item.name}}" checked="{{item.checked}}" /> {{item.value}}
    </label>
  </radio-group>

  <text class='title'>checkbox</text>
  <checkbox-group bindchange="checkboxChange" class="radio-group">
    <label  wx:for="{{items}}">
      <checkbox value="{{item.name}}" checked="{{item.checked}}" /> {{item.value}}
    </label>
  </checkbox-group>


  <view class='show_radio_content'>
    <text>当前选择地区：{{radio_check_content}}</text>
  </view>
</view>

js:

//index.js
Page({
  data: {
    items: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国' },
    ],
    radio_check_content:"CHN"
  },
  radioChange(e){
    this.setData({
      radio_check_content:e.detail.value
    })
  },
  checkboxChange(e){
    this.setData({
      radio_check_content: e.detail.value
    })
  }
})

wxss:

/**index.wxss**/
.radio-group{
  display: flex;
  flex-direction: column;
  width: 95%;
}

.show_radio_content{
  padding: 10rpx;
  width: 95%;
}

.title{
  padding: 10rpx;
  color: red;
}

代码撸完，真是一下效果，没当选择，都会展示选择后的效果：

10-1.png

10-2.png