微信小程序:实现单选,多选,通过变量控制单选/多选

一、实现单选功能

微信小程序提供了 radio 组件来实现单选功能。radio 组件需要配合 radio-group 使用。

1. WXML 代码

html 复制代码
<radio-group bindchange="onRadioChange">
  <label wx:for="{{items}}" wx:key="id">
    <radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}
  </label>
</radio-group>

2. JS 代码

javascript 复制代码
Page({
  data: {
    items: [
      { id: 1, name: '选项A', value: 'A', checked: false },
      { id: 2, name: '选项B', value: 'B', checked: false },
      { id: 3, name: '选项C', value: 'C', checked: false }
    ]
  },

  // 单选按钮变化事件
  onRadioChange(e) {
    const value = e.detail.value; // 获取选中的值
    const items = this.data.items.map(item => {
      item.checked = item.value === value; // 更新选中状态
      return item;
    });

    this.setData({ items });
    console.log('选中的值:', value);
  }
});

3. 实现效果

  • 用户只能选择一个选项。

  • 选中的值会通过 onRadioChange 事件返回。


二、实现多选功能

微信小程序提供了 checkbox 组件来实现多选功能。checkbox 组件需要配合 checkbox-group 使用。

1. WXML 代码

html 复制代码
<checkbox-group bindchange="onCheckboxChange">
  <label wx:for="{{items}}" wx:key="id">
    <checkbox value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}
  </label>
</checkbox-group>

2. JS 代码

javascript

javascript 复制代码
Page({
  data: {
    items: [
      { id: 1, name: '选项A', value: 'A', checked: false },
      { id: 2, name: '选项B', value: 'B', checked: false },
      { id: 3, name: '选项C', value: 'C', checked: false }
    ]
  },

  // 多选按钮变化事件
  onCheckboxChange(e) {
    const values = e.detail.value; // 获取选中的值数组
    const items = this.data.items.map(item => {
      item.checked = values.includes(item.value); // 更新选中状态
      return item;
    });

    this.setData({ items });
    console.log('选中的值:', values);
  }
});

3. 实现效果

  • 用户可以选择多个选项。

  • 选中的值会通过 onCheckboxChange 事件返回一个数组。


三、自定义单选和多选

如果你不想使用 radiocheckbox 组件,可以通过自定义逻辑实现单选和多选功能。

1. WXML 代码

html 复制代码
<view class="container">
  <view wx:for="{{items}}" wx:key="id" class="item {{item.checked ? 'active' : ''}}" bindtap="onItemTap" data-index="{{index}}">
    {{item.name}}
  </view>
</view>

2. JS 代码

javascript

javascript 复制代码
Page({
  data: {
    items: [
      { id: 1, name: '选项A', value: 'A', checked: false },
      { id: 2, name: '选项B', value: 'B', checked: false },
      { id: 3, name: '选项C', value: 'C', checked: false }
    ],
    isMultiple: false // 是否多选
  },

  // 点击选项事件
  onItemTap(e) {
    const index = e.currentTarget.dataset.index; // 获取点击的索引
    const items = this.data.items;

    if (this.data.isMultiple) {
      // 多选逻辑
      items[index].checked = !items[index].checked;
    } else {
      // 单选逻辑
      items.forEach((item, i) => {
        item.checked = i === index;
      });
    }

    this.setData({ items });
    console.log('当前选中的值:', items.filter(item => item.checked).map(item => item.value));
  }
});

3. WXSS 代码

css 复制代码
.container {
  padding: 20px;
}

.item {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  text-align: center;
}

.active {
  background-color: #07c160;
  color: white;
}

4. 实现效果

单选

多选

  • 点击选项时,根据 isMultiple 的值决定是单选还是多选。

  • 选中的选项会高亮显示。


四、总结

功能 使用组件 特点
单选 radio + radio-group 只能选择一个选项
多选 checkbox + checkbox-group 可以选择多个选项
自定义选择 无组件,通过逻辑实现 更灵活,可以自定义样式和交互逻辑
相关推荐
清风絮柳6 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
说私域7 小时前
基于开源AI大模型与S2B2C模式的线下服务型门店增长策略研究——以AI智能名片与小程序源码技术为核心
大数据·人工智能·小程序·开源
小程序照片合成8 小时前
uniapp微信小程序开发工具本地获取指定页面二维码
微信小程序·小程序·uniapp·二维码
低代码布道师8 小时前
加油站小程序实战教程05活动管理
低代码·小程序
教练 我想学编程9 小时前
学习记录706@微信小程序+springboot项目 真机测试 WebSocket错误: {errMsg: Invalid HTTP status.}连接不上
spring boot·学习·微信小程序
arbboter12 小时前
【AI插件开发】Notepad++ AI插件开发实践:从Dock窗口集成到功能菜单实现
人工智能·notepad++·动态菜单·notepad++插件开发·dock窗口集成·ai代码辅助工具·ai对话窗口
橘猫云计算机设计12 小时前
基于django优秀少儿图书推荐网(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·python·小程序·django·毕业设计
认真敲代码的小火龙16 小时前
微信小程序(下)
微信小程序·小程序
Mr.Liu616 小时前
小程序29-事件穿参-mark 自定义数据
前端·微信小程序·小程序
web_Hsir17 小时前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++