2023年微信小程序表單組件單選框 radio

微信小程序表單組件單選框radio可以用于實現(xiàn)單項選擇器，內部由多個<radio/>組成的功能。在微信小程序中，使用<radio-group/>標簽來實現(xiàn)單選框的功能。以下是一些關鍵屬性的說明：

1. <radio-group/>屬性

1. bindchange:
   當<radio-group/>中選中的<radio/>發(fā)生變化時，會觸發(fā)change事件。需要設置事件處理函數(shù)，在事件處理函數(shù)中可以通過e.detail.value獲取選中的<radio/>的value值。

2. <radio/>屬性

1. value:
   <radio/>的標識，當該<radio/>選中時，<radio-group/>的change事件會攜帶<radio/>的value值。
2. checked:
   當前是否選中，默認為false。
3. disabled:
   是否禁用，默認為false。
4. color:
   <radio/>的顏色，同css的color。

參考代碼

在微信小程序中，可以通過以下代碼來使用單選框：

<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: '美國'},
      {name: 'CHN', value: '中國', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英國'},
      {name: 'TUR', value: '法國'},
    ]
  },
  radioChange: function(e) {
    console.log('radio發(fā)生change事件，攜帶value值為：', e.detail.value)
  }
})

其中data定義了<radio/>中需要渲染的數(shù)據(jù)信息，包括每個選項的name和value以及默認選中項的狀態(tài)checked。radioChange函數(shù)用于處理<radio-group/>的change事件，獲取選中項的value值。

<本文由himall原創(chuàng)，商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請標明：himall原創(chuàng)>