微信小程序单选框和复选框

1. 单选框（radio）

语法：

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

• radio-group: 单选框组件，用于包裹一组 radio 组件。
• bindchange: 绑定一个事件处理函数，表示选中的值发生变化时触发。
• radio: 单选框组件，代表一个选项。
  • value: 选项的值。
  • checked: 是否选中。
  • name: 选项的显示名称

使用方法：

1. 在页面的 data 中定义一个数组 items，包含需要显示的单选框选项。
2. 根据需要在页面的 methods 区域定义 radioChange 方法，处理单选框值改变事件。

 JS逻辑

Page({
  data: {
    items: [
      {name: '选项1', value: '1', checked: false},
      {name: '选项2', value: '2', checked: false},
      {name: '选项3', value: '3', checked: false}
    ]
  },
  radioChange: function(e) {
    let items = this.data.items;
    for (let i = 0; i < items.length; i++) {
      items[i].checked = items[i].value === e.detail.value;
    }
    this.setData({
      items: items
    });
  }
});

多选框（checkbox ）

语法：

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

• checkbox-group: 多选框组件，用于包裹一组 checkbox 组件。
• bindchange: 绑定一个事件处理函数，表示选中的值发生变化时触发。
• checkbox: 多选框组件，代表一个选项。
  • value: 选项的值。
  • checked: 是否选中。
  • name: 选项的显示名称。

 

使用方法：

1. 在页面的 data 中定义一个数组 items，包含需要显示的多选框选项。
2. 根据需要在页面的 methods 区域定义 checkboxChange 方法，处理多选框值改变事件。

 

JS 逻辑： 

Page({
  data: {
    items: [
      {name: '选项1', value: '1', checked: false},
      {name: '选项2', value: '2', checked: false},
      {name: '选项3', value: '3', checked: false}
    ]
  },
  checkboxChange: function(e) {
    let items = this.data.items;
    items.forEach(item => {
      item.checked = e.detail.value.indexOf(item.value) !== -1;
    });
    this.setData({
      items: items
    });
  }
});