Skip to main content

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#

NameDescription
bindchangeThe change event is triggered when the selected item in the radio-group changes, detail = {value:[array of values of the selected radio]}