WeChat Open Platform

Mini Programs Documentation

checkbox-group

Multi selector, composed of multiple checkboxes internally.

Attribute name Type Default value Description
bindchange EventHandle Changes to a selected item in <checkbox-group/> trigger a change event, detail = {value:[selected checkbox value array]}

checkbox

Select multiple items.

Attribute name Type Default value Description
value String <checkbox/> ID, triggers <checkbox-group/> change event when selected and brings <checkbox/> value
disabled Boolean false Whether disabled
checked Boolean false Whether currently selected, can be used to set the default selection
color Color checkbox color, same as css color

Example:

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</checkbox-group>
Page({
  data: {
    items: [
      {name: 'USA', value: 'USA'},
      {name: 'CHN', value: 'China', checked: 'true'},
      {name: 'BRA', value: 'Brazil'},
      {name: 'JPN', value: 'Japan'},
      {name: 'ENG', value: 'England'},
      {name: 'TUR', value: 'France'},
    ]
  },
  checkboxChange: function(e) {
    console.log('when a checkbox change event occurs, the value brought is:', e.detail.value)
  }
})

checkbox