微信小程序自定义radio和checkbox样式

WXSS中使用:checked选择符是没用的，直接用display:none隐藏掉，然后使用新标签设计样式

注：label组件用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/label.html

WXML

<radio-group bindchange="radioChange"> 
  <label class="ui-radio {{item.checked==true?'checked':'unchecked'}}" wx:for="{{items}} wx:key="*this">
    <radio value="{{item.value}}" checked="{{item.checked}}"></radio>
    <text class="text">{{item.name}}</text>
  </label>
</radio-group>

WXSS

.ui-radio radio, .ui-checkbox checkbox {
  display: none;
}
.ui-radio.unchecked .text {
  /*设计样式*/
}
.ui-radio.checked .text {
  /*设计样式*/
}

JS

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

    var items = this.data.items;
    for (var i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value == e.detail.value
    }

    this.setData({
      items: items
    });
  }
})