Vue+JavaScript实现复选框全选/取消全选功能遇阻求助

原有代码问题分析 #

1. 直接操作DOM（document.getElementsByClassName）违背Vue响应式设计，DOM修改无法同步到数据，数据变化也无法更新DOM状态
2. 函数逻辑错误：所有目标复选框都带有assign_register类名，导致只会执行array[i].checked = true，无法实现取消全选的切换逻辑
3. 尝试v-model失败通常是因为未正确绑定到响应式数据，或未处理全选与单个选项状态的双向同步

正确实现方案（Vue 3 组合式API） #

脚本部分

import { ref, computed } from 'vue'

export default {
  setup() {
    // 模拟列表数据，为每个项添加checked响应式属性
    const valor = ref([
      { id: 1, name: '选项1', checked: false },
      { id: 2, name: '选项2', checked: false },
      { id: 3, name: '选项3', checked: false }
    ])
    // 全选按钮的状态
    const checkAllStatus = ref(false)

    // 计算属性：判断是否所有项都已选中，用于同步全选按钮状态
    const isAllChecked = computed(() => {
      return valor.value.every(item => item.checked)
    })

    // 切换全选/取消全选
    const toggleCheckAll = () => {
      checkAllStatus.value = !checkAllStatus.value
      valor.value.forEach(item => {
        item.checked = checkAllStatus.value
      })
    }

    // 单个复选框状态变化时，更新全选按钮状态
    const handleItemCheck = () => {
      checkAllStatus.value = isAllChecked.value
    }

    return {
      valor,
      checkAllStatus,
      toggleCheckAll,
      handleItemCheck
    }
  }
}

模板部分

<!-- 全选控制按钮 -->
<div>
  <input type="checkbox" v-model="checkAllStatus" @change="toggleCheckAll" /> 全选
</div>

<!-- 列表复选框 -->
<table>
  <template v-for="item in valor" :key="item.id">
    <tr>
      <td>
        <input 
          type="checkbox" 
          class="assign_register" 
          v-model="item.checked" 
          @change="handleItemCheck"
          style="width: 20px; height: 20px;"
        />
      </td>
      <td>{{ item.name }}</td>
    </tr>
  </template>
</table>

Vue 2 选项式API版本 #

脚本部分

export default {
  data() {
    return {
      valor: [
        { id: 1, name: '选项1', checked: false },
        { id: 2, name: '选项2', checked: false },
        { id: 3, name: '选项3', checked: false }
      ],
      checkAllStatus: false
    }
  },
  computed: {
    isAllChecked() {
      return this.valor.every(item => item.checked)
    }
  },
  methods: {
    toggleCheckAll() {
      this.checkAllStatus = !this.checkAllStatus
      this.valor.forEach(item => {
        item.checked = this.checkAllStatus
      })
    },
    handleItemCheck() {
      this.checkAllStatus = this.isAllChecked
    }
  }
}

模板部分与Vue 3版本一致，无需修改。

核心实现要点 #

• 完全基于Vue响应式数据控制复选框状态，避免直接操作DOM
• 通过computed属性实时判断所有选项的选中状态，确保全选按钮与列表选项状态同步
• 全选方法通过遍历列表，统一设置每个选项的checked值
• 单个选项状态变化时，自动更新全选按钮的状态

内容的提问来源于stack exchange，提问作者scorpions78