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

一、实现单选功能

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

1. WXML 代码

  
     {{item.name}}
  

2. JS 代码

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);
  }
});

二、实现多选功能

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

1. WXML 代码

  
     {{item.name}}
  

2. JS 代码

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);
  }
});

三、自定义单选和多选

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

1. WXML 代码

  
    {{item.name}}
  

2. JS 代码

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 代码

.container {
  padding: 20px;
}
 
.item {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  text-align: center;
}
 
.active {
  background-color: #07c160;
  color: white;
}