在Vue.js中判断复选框是否被勾选，通常通过v-model实现双向数据绑定，单个复选框可直接绑定布尔值（如v-model="isChecked"），勾选时isChecked为true；多个复选框则绑定数组（如v-model="selectedItems"），勾选的选项值会自动存入数组，也可通过事件监听（如@change="handleChange"），在回调中通过事件对象的checked属性获取当前状态，可直接访问绑定的data属性值，实时获取勾选状态，实现动态逻辑控制。
Vue.js 中精准判断复选框勾选状态：从基础到进阶的完整指南
在构建交互式表单时，复选框（Checkbox）扮演着至关重要的角色，在 Vue.js 框架中，准确判断复选框的勾选状态是实现数据收集、表单验证、状态联动以及动态UI控制的核心环节，本文将系统性地介绍 Vue.js 中判断复选框勾选状态的多种方法，涵盖基础绑定、数组处理、DOM操作以及事件驱动等场景,助您灵活应对各类开发需求。
单个复选框：`v-model` 绑定布尔值（最推荐）
对于独立存在的单个复选框，Vue.js 提供了最简洁高效的解决方案：使用 `v-model` 指令直接绑定一个布尔值变量,该变量的状态将完美同步复选框的勾选状态。
基础用法示例
<template>
<div>
<label>
<input type="checkbox" v-model="isAgreed"> 我已阅读并同意服务条款
</label>
<p>当前状态：{{ isAgreed ? '✅ 已勾选' : '❌ 未勾选' }}</p>
</div>
</template>
<script>
export default {
data() {
return {
isAgreed: false // 默认未勾选
}
}
}
</script>
核心原理
v-model在单个复选框上会自动进行双向绑定：勾选时变量赋值为true，取消勾选时赋值为false。- 直接访问绑定的变量（如
isAgreed）即可实时获取复选框状态，无需额外判断逻辑，完美体现 Vue 的数据驱动特性。
多个复选框：`v-model` 绑定数组（多选场景）
当需要同时管理多个关联复选框（如多选标签、偏好设置、多选选项）时，`v-model` 可绑定一个数组，数组将动态存储所有当前被勾选的复选框对应的 value 值。
示例：多选爱好收集
<template>
<div>
<p>请选择您的兴趣爱好（可多选）：</p>
<label>
<input type="checkbox" v-model="hobbies" value="篮球"> 篮球
</label>
<label>
<input type="checkbox" v-model="hobbies" value="足球"> 足球
</label>
<label>
<input type="checkbox" v-model="hobbies" value="游泳"> 游泳
</label>
<label>
<input type="checkbox" v-model="hobbies" value="阅读"> 阅读
</label>
<p>已选爱好：{{ hobbies.join('、') || '暂无' }}</p>
<p>是否勾选了足球：{{ hobbies.includes('足球') ? '✅ 是' : '❌ 否' }}</p>
<p>勾选总数：{{ hobbies.length }} 项</p>
</div>
</template>
<script>
export default {
data() {
return {
hobbies: [] // 默认空数组，存储选中的值
}
}
}
</script>
核心逻辑与操作
v-model绑定数组时，每个复选框的value属性值会在勾选时被自动添加到数组中,在取消勾选时被移除。- 判断特定选项是否被勾选：使用
数组.includes(值)方法（如hobbies.includes('足球')）,返回布尔值。 - 获取所有勾选状态：直接访问数组
hobbies，其长度hobbies.length表示勾选数量,数组内容即为所有选中值。 - 进阶操作：可结合数组方法如
filter、map、reduce进行更复杂的状态统计或转换。
手动获取状态：`ref` + DOM 操作（特殊场景）
在需要直接操作 DOM 或与某些非 Vue 集成的库交互时，可通过 ref 获取原生 DOM 元素，并直接读取其 checked 属性，此方法应谨慎使用，优先考虑 v-model。
示例：手动判断与状态更新
<template>
<div>
<label>
<input type="checkbox" ref="manualCheck"> 手动控制复选框
&label>
<button @click="getCheckedStatus">获取当前状态</button>
<button @click="toggleCheck">切换勾选状态</button>
<p>当前状态：{{ statusText }}</p>
</div>
</template>
<script>
export default {
data() {
return {
statusText: '未知'
}
},
methods: {
getCheckedStatus() {
// 通过 ref 获取原生 DOM 元素
const checkbox = this.$refs.manualCheck
// 直接读取 checked 属性
const isChecked = checkbox.checked
this.statusText = isChecked ? '✅ 已勾选' : '❌ 未勾选'
},
