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

Page({
  data: {
    items: [
      { id: 1, name: '選項(xiàng)A', value: 'A', checked: false },
      { id: 2, name: '選項(xiàng)B', value: 'B', checked: false },
      { id: 3, name: '選項(xiàng)C', value: 'C', checked: false }
    ]
  },
  // 單選按鈕變化事件
  onRadioChange(e) {
    const value = e.detail.value; // 獲取選中的值
    const items = this.data.items.map(item => {
      item.checked = item.value === value; // 更新選中狀態(tài)
      return item;
    });
    this.setData({ items });
    console.log('選中的值:', value);
  }
});

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

Page({
  data: {
    items: [
      { id: 1, name: '選項(xiàng)A', value: 'A', checked: false },
      { id: 2, name: '選項(xiàng)B', value: 'B', checked: false },
      { id: 3, name: '選項(xiàng)C', value: 'C', checked: false }
    ]
  },
  // 多選按鈕變化事件
  onCheckboxChange(e) {
    const values = e.detail.value; // 獲取選中的值數(shù)組
    const items = this.data.items.map(item => {
      item.checked = values.includes(item.value); // 更新選中狀態(tài)
      return item;
    });
    this.setData({ items });
    console.log('選中的值:', values);
  }
});

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

Page({
  data: {
    items: [
      { id: 1, name: '選項(xiàng)A', value: 'A', checked: false },
      { id: 2, name: '選項(xiàng)B', value: 'B', checked: false },
      { id: 3, name: '選項(xiàng)C', value: 'C', checked: false }
    ],
    isMultiple: false // 是否多選
  },
  // 點(diǎn)擊選項(xiàng)事件
  onItemTap(e) {
    const index = e.currentTarget.dataset.index; // 獲取點(diǎn)擊的索引
    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('當(dāng)前選中的值:', items.filter(item => item.checked).map(item => item.value));
  }
});

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