radio-group
Use radio-group to compose many radios by putting radios inside radio-group.
Example
bxml
<view class="container"> <view class="page-body"> <view class="page-section page-section-gap"> <view class="page-section page-section-gap"> <view class="page-section-title">Default Style</view> <radio value="cb" checked bindtap="onRadioTap" bind:longpress="onRadioLongPress" ></radio> <radio value="cb" bindtap="onRadioTap" bind:longpress="onRadioLongPress" ></radio>
<view class="page-section-title">With label</view> <label class="radio" bindtap="onLabelClick" > <radio value="cb" checked bindtap="onRadioTap" bind:longpress="onRadioLongPress" ></radio> Checked </label> <label class="radio"> <radio value="cb"></radio>Unchecked </label> <view class="page-section-title">disabled</view> <label class="radio"> <radio value="cb" disabled checked></radio>Checked </label> <label class="radio"> <radio value="cb" disabled></radio>Unchecked </label>
<view class="page-section-title">Controlled</view> <label class="radio" bindtap="onControlledLabelTap" > <radio value="cb" checked="{{checked}}"></radio> Checked </label> <button bindtap="onControlledButtonTap" > Toggle checked </button> </view> </view> <view class="page-section"> <view class="page-section-title">Recommended Styl</view> <view class="bnui-cells bnui-cells_after-title"> <radio-group bindchange="radioChange" bindtap="onRadioGroupTap" > <label class="bnui-cell bnui-check__label" bn:for="{{items}}" bn:key="index" bindtap="onLabelClick" > <view class="bnui-cell__hd"> <radio value="{{item.value}}" checked={{item.checked}} bindtap="onItemsRadioTap" bind:longpress="onItemsRadioLongpress" ></radio> </view> <view class="bnui-cell__bd">{{item.name}}</view> </label> </radio-group> </view> </view> </view></view>
bxss
.radio { margin-right: 20px;}
js
Page({ data: { items: [ { value: 'USA', name: 'USA' }, { value: 'CHN', name: 'CHN', checked: true }, { value: 'BRA', name: 'BRA' }, { value: 'JPN', name: 'JPN' }, { value: 'ENG', name: 'ENG' }, { value: 'FRA', name: 'FRA' } ], checked: false }, onRadioTap(e) { console.log("[Click] radio", e) }, onRadioLongPress(e) { console.log("[Click] radio bind:longpress", e) }, onLabelClick(e) { console.log("[Click] label", e) }, onControlledLabelTap() { this.setData({ checked: !this.data.checked }) }, onControlledButtonTap() { this.setData({ checked: !this.data.checked }) }, radioChange(e){ console.log('[RadioGroup] radio fires change event,value:', e.detail.value) const items = this.data.items for (let i = 0, len = items.length; i < len; ++i) { items[i].checked = items[i].value === e.detail.value } this.setData({ items }) }, onRadioGroupTap(e) { console.log("[Click] RadioGroup", e) }, onItemsRadioTap(e) { console.log("[Click] radio", e) }, onItemsRadioLongpress(e) { console.log("[Click] radio bind:longpress", e) },})
Events#
Name | Description |
---|---|
bindchange | The change event is triggered when the selected item in the radio-group changes, detail = {value:[array of values of the selected radio]} |