radio-group

Radio item selector; composed of multiple <radio/> internal components.

Attribute Name Type Default Value Description
bindchange EventHandle Changes on the selected item in <radio-group/> will trigger a change event; event.detail = {value: the radio's value for the selected item}

radio

Radio item

Attribute Name Type Default Value Description
value String <radio/> identification. When the <radio/> is selected, the change event of <radio-group/> will carry the value of <radio/>
checked Boolean false Whether it is selected
disabled Boolean false Whether it is disabled
color Color radio color. This is the same as the css color

Sample:

Preview with Developer Tool

<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>
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'},
    ]
  },
  radioChange: function(e) {
    console.log ('a change event occurred on radio; carry value is: ', e.detail.value)
  }
})

radioradio