微信小程序如何实现单选按钮

这篇文章主要介绍“微信小程序如何实现单选按钮”，在日常操作中，相信很多人在微信小程序如何实现单选按钮问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序如何实现单选按钮”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

逻辑

• 单选框的逻辑比较简单，把所有的元素遍历出来，等到点击单选按钮的时候，当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
  }```

到此，关于“微信小程序如何实现单选按钮”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！