uni-app checkbox-group复选框事件

情况1

v-show 在小程序环境，v-show无效，要隐藏的项仍然显示，H5可实现隐藏

<checkbox-group @change="onCheck">
<label v-show="item.show" v-for="item in checkboxItems" :key="item.value">
<checkbox :value="item.value" :checked="item.checked" />{{item.label}}
</label>
</checkbox-group>

情况2

v-if 在小程序环境有效，但onCheck事件打印结果e.target.value数组内没有被隐藏的这一项的value值，是因为元素没有被渲染，所以:checked无效吗？可以这么理解吗？

<checkbox-group @change="onCheck">
<label v-show="item.show" v-for="item in checkboxItems" :key="item.value">
<checkbox :value="item.value" :checked="item.checked" />{{item.label}}
</label>
</checkbox-group>

情况3

解决办法动态style，可实现既不显示要隐藏的项，onCheck事件又可以打印出隐藏项的value值

<checkbox-group @change="onCheck">
<label :style="{display:item.show ? '' : 'none'}" v-for="item in checkboxItems" :key="item.value">
<checkbox :value="item.value" :checked="item.checked" />{{item.label}}
</label>
</checkbox-group>

htzhanglong 1楼•5 小时前

在uni-app中，checkbox-group组件用于绑定一组checkbox，用户可以通过选择多个checkbox来实现多项选择的功能。为了处理checkbox-group的复选框事件，我们通常会监听change事件，该事件在用户选择或取消选择checkbox时会触发。

以下是一个简单的示例，展示了如何在uni-app中实现checkbox-group的复选框事件处理：

页面模板（template）：

<template>
  <view>
    <checkbox-group @change="checkboxChange">
      <label v-for="(item, index) in items" :key="index">
        <checkbox :value="item.value">{{ item.text }}</checkbox>
      </label>
    </checkbox-group>
    <view>
      <text>已选项: {{ selectedItems }}</text>
    </view>
  </view>
</template>

页面脚本（script）：

<script>
export default {
  data() {
    return {
      items: [
        { value: 'apple', text: '苹果' },
        { value: 'banana', text: '香蕉' },
        { value: 'orange', text: '橙子' }
      ],
      selectedItems: []
    };
  },
  methods: {
    checkboxChange(e) {
      // e.detail.value 是用户选中的复选框的值数组
      this.selectedItems = e.detail.value;
      console.log('已选项:', this.selectedItems);
    }
  }
};
</script>

页面样式（style，可选）：

<style scoped>
/* 你可以根据需要自定义样式 */
checkbox {
  margin-right: 10px;
}
</style>

在这个示例中，我们定义了一个checkbox-group，并为其绑定了change事件处理器checkboxChange。当用户选择或取消选择checkbox时，checkboxChange方法会被调用，并接收一个事件对象e。通过e.detail.value，我们可以获取到当前选中的checkbox的值数组，并将其赋值给selectedItems，以在页面上显示已选项。

此外，我们还使用了v-for指令来动态生成checkbox，这样可以根据items数组的内容来灵活地生成多个checkbox选项。

这个示例展示了如何在uni-app中处理checkbox-group的复选框事件，并实时更新已选项的显示。你可以根据自己的需求对示例进行修改和扩展。