您现在的位置是：网站首页> 编程资料编程资料
微信小程序实现单选按钮_javascript技巧_
2023-05-24
371人已围观
简介 微信小程序实现单选按钮_javascript技巧_
本文实例为大家分享了微信小程序实现单选按钮的具体代码，供大家参考，具体内容如下
逻辑
- 单选框的逻辑比较简单，把所有的元素遍历出来，等到点击单选按钮的时候，当value值与遍历变量值一致的时候就 把checked 设置为true，其他的时候把checked设置为 false 只需要一次循环。
- 复选框的逻辑，也不复杂，当只有一个被选中的选项的时候，当点击已经选择的选项的时候，首选外层循环设置为false，这个时候 e.detail.value为零，所以无法进入内层循环，所以被取消。当选中未选择的选项的时候，则从第一个选项开始遍历，如果value值与外层相同则设置为TRUE。然后跳出内层，继续遍历，当有两个选中的选项的时候，点击已经选择的按钮，values值会减少l，所以最后一次的外层循环无法进入内层，所有取消该选项。
举例， 两选一 , 默认选中第一个；效果图如下：
.wxml文件 ：
.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 }```以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能感兴趣的文章:
