微信小程序如何實現單選按鈕

這篇文章主要介紹“微信小程序如何實現單選按鈕”，在日常操作中，相信很多人在微信小程序如何實現單選按鈕問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序如何實現單選按鈕”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

邏輯

• 單選框的邏輯比較簡單，把所有的元素遍歷出來，等到點擊單選按鈕的時候，當value值與遍歷變量值一致的時候就 把checked 設置為true，其他的時候把checked設置為 false 只需要一次循環。

• 復選框的邏輯，也不復雜，當只有一個被選中的選項的時候，當點擊已經選擇的選項的時候，首選外層循環設置為false，這個時候 e.detail.value為零，所以無法進入內層循環，所以被取消。當選中未選擇的選項的時候，則從第一個選項開始遍歷，如果value值與外層相同則設置為TRUE。然后跳出內層，繼續遍歷，當有兩個選中的選項的時候，點擊已經選擇的按鈕，values值會減少l，所以最后一次的外層循環無法進入內層，所有取消該選項。

舉例， 兩選一 , 默認選中第一個；效果圖如下：

.wxml文件 ：

<view class='button_container'>
  <block wx:for="{{buttons}}" wx:key="buttons">
    <button class='{{item.checked?"checked_button":"normal_button"}}' data-id='{{item.id}}' bindtap='radioButtonTap'>{{item.name}}</button>
  </block>
</view>

.js文件 ：

Page({
  data:{
    buttons: [{ id: 1, name: '失物招領' }, { id: 2, name: '尋物啟事' }]
  },
  onLoad: function() {//默認選了第一個
    this.data.buttons[0].checked = true;
    this.setData({
      buttons: this.data.buttons,
    })
  },
   
  radioButtonTap: function (e) {
  console.log(e)
  let id = e.currentTarget.dataset.id
  console.log(id)
  for (let i = 0; i < this.data.buttons.length; i++) {
    if (this.data.buttons[i].id == id) {
      //當前點擊的位置為true即選中
      this.data.buttons[i].checked = true;    
    }
    else {
      //其他的位置為false
    this.data.buttons[i].checked = false;
    }
  }
  this.setData({
  buttons: this.data.buttons
  })
  }
})

.wxss文件 ：

.button_container{
  display: flex;
  flex-direction: row;
  justify-content: space-around
  }
  
  /* 按鈕未選中 */
 .normal_button{
  background: white；
  }
  
  /* 按鈕選中 */
  .checked_button{
  background: #36ab60;
  color: white
  }```

到此，關于“微信小程序如何實現單選按鈕”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！