uniapp改变checkbox选中状态

修改 checkbox 选中状态的方法

在 uniapp 中修改 checkbox 的选中状态可以通过数据绑定和事件处理来实现。以下是具体实现方式：

数据绑定方式控制选中状态

// 在 data 中定义绑定变量
data() {
  return {
    isChecked: false
  }
}

<!-- 模板中使用 v-model 绑定 -->
<checkbox :checked="isChecked" @change="handleChange" />

通过方法动态修改状态

methods: {
  toggleCheckbox() {
    this.isChecked = !this.isChecked
  },
  handleChange(e) {
    console.log('选中状态:', e.detail.value)
  }
}

使用 checkbox-group 的情况

当需要处理多个 checkbox 时，可以使用 checkbox-group：

<checkbox-group @change="checkboxChange">
  <checkbox v-for="item in list" :value="item.value" :checked="item.checked" />
</checkbox-group>

data() {
  return {
    list: [
      {value: 'apple', checked: false},
      {value: 'banana', checked: true}
    ]
  }
},
methods: {
  checkboxChange(e) {
    this.list.forEach(item => {
      item.checked = e.detail.value.includes(item.value)
    })
  }
}

注意事项

• uniapp 的 checkbox 组件在不同平台的表现可能略有差异
• 小程序端需要使用 @change 事件而非 v-on:input
• H5 端可以使用标准的 HTML checkbox 属性

通过数据驱动视图的方式可以确保 checkbox 状态变更的正确性和一致性。