当前位置：首页 > uni-app

uniapp改变checkbox选中状态

2026-01-13 19:39:43uni-app

修改 checkbox 选中状态的方法

在 uniapp 中修改 checkbox 的选中状态可以通过以下几种方式实现：

绑定 v-model 控制状态

通过数据绑定方式控制 checkbox 的选中状态是最常用的方法：

uniapp改变checkbox选中状态

<template>
  <view>
    <checkbox-group @change="checkboxChange">
      <label>
        <checkbox :value="checked" /> 选项
      </label>
    </checkbox-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  },
  methods: {
    checkboxChange(e) {
      this.checked = e.detail.value
    }
  }
}
</script>

动态修改数据值

直接修改绑定的数据值可以改变 checkbox 状态：

uniapp改变checkbox选中状态

this.checked = true  // 选中
this.checked = false // 取消选中

使用 ref 获取组件实例

通过 ref 获取组件实例后调用方法：

<template>
  <checkbox ref="myCheckbox" />
</template>

<script>
export default {
  methods: {
    changeState() {
      this.$refs.myCheckbox.toggle()
    }
  }
}
</script>

注意事项

checkbox 组件必须包裹在 checkbox-group 中才能正确触发 change 事件 H5 平台和微信小程序平台的实现方式略有差异，需要注意平台兼容性动态修改数据时，确保数据响应式更新，必要时使用 this.$set 方法