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

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

checkbox

• value：标识，选中时触发的 change 事件，并携带 的 value

• disabled ：是否禁用

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

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

radio

• value： 标识。当该 选中时， 的 change 事件会携带的value

• checked：当前是否选中

• disabled：是否禁用

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

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

  radio
  
    
       {{item.value}}
    
  

  checkbox
  
    
       {{item.value}}
    
  


  
    当前选择地区：{{radio_check_content}}
  

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