小程序checkbox的单选按钮

小程序中的 checkbox 组件默认是多选框，如果要实现单选按钮的效果可以采用以下两种方式：

1. 使用 radio 组件代替 checkbox 组件

radio 组件是单选框组件，只能选择其中一个选项。可以使用 radio-group 组件来将多个 radio 组件包裹在一起，这样就能实现单选按钮的效果。

示例代码：

<radio-group bindchange="onChange">
  <label class="radio">
    <radio value="A" checked="{{true}}">选项 A</radio>
  </label>
  <label class="radio">
    <radio value="B">选项 B</radio>
  </label>
  <label class="radio">
    <radio value="C">选项 C</radio>
  </label>
</radio-group>

2. 在 checkbox 组件上添加点击事件，手动实现单选按钮的效果

示例代码：

<checkbox-group bindchange="onChange">
  <label class="checkbox">
    <checkbox value="A" checked="{{true}}" data-name="A" data-checked="{{true}}" bindtap="onTap">选项 A</checkbox>
  </label>
  <label class="checkbox">
    <checkbox value="B" data-name="B" data-checked="{{false}}" bindtap="onTap">选项 B</checkbox>
  </label>
  <label class="checkbox">
    <checkbox value="C" data-name="C" data-checked="{{false}}" bindtap="onTap">选项 C</checkbox>
  </label>
</checkbox-group>

JS代码：

Page({
  data: {
    items: [
      {name: 'A', checked: true},
      {name: 'B', checked: false},
      {name: 'C', checked: false},
    ],
  },
  onTap: function(event) {
    var name = event.currentTarget.dataset.name;
    var checked = event.currentTarget.dataset.checked;
    var items = this.data.items;
    for (var i = 0; i < items.length; i++) {
      if (items[i].name == name) {
        items[i].checked = !checked;
      } else {
        items[i].checked = false;
      }
    }
    this.setData({
      items: items,
    });
  },
  onChange: function(event) {
    console.log(event.detail.value);
  },
});

在 onTap 函数中，首先获取当前点击的选项的名称和状态（是否选中），然后遍历所有选项，将当前选项设置为选中状态，其它选项设置为未选中状态。最后调用 setData 函数更新数据即可。注意要将 checkbox 的 checked 属性设置为 false，否则会出现多选的情况。

以上两种方式都可以实现单选按钮的效果，具体选择哪一种方式取决于具体需求。