如何将jQuery实现的全页面取消勾选所有复选框功能改写为Vue版本

首先要注意Vue的核心设计是数据驱动视图，和jQuery直接操作DOM的思路完全不同，优先通过修改响应式数据实现效果，不推荐主动操作DOM。 #

最优实现方案（数据驱动，推荐） #

所有复选框的选中状态统一绑定同一个响应式数组，取消全选时直接清空数组即可：

模板代码 #

<!-- 取消全选按钮 -->
<button @click="handleUncheckAll">取消全部勾选</button>

<!-- 复选框列表，v-model绑定同一个数组 -->
<input type="checkbox" value="选项1" v-model="checkedList"> 选项1
<input type="checkbox" value="选项2" v-model="checkedList"> 选项2
<input type="checkbox" value="选项3" v-model="checkedList"> 选项3

脚本代码 #

选项式API（Vue2/Vue3通用）

<script>
export default {
  data() {
    return {
      // 存储所有已勾选复选框的value值
      checkedList: []
    }
  },
  methods: {
    handleUncheckAll() {
      // 清空数组后所有绑定的复选框会自动取消勾选
      this.checkedList = []
    }
  }
}
</script>

Vue3 <script setup> 语法

<script setup>
import { ref } from 'vue'
// 响应式数组
const checkedList = ref([])
const handleUncheckAll = () => {
  checkedList.value = []
}
</script>

特殊场景兼容方案（操作DOM，不推荐） #

如果确实无法统一绑定数组，可以通过ref获取DOM节点修改checked属性，仅在迫不得已时使用：

模板代码 #

<button @click="handleUncheckAll">取消全部勾选</button>
<!-- 所有需要批量操作的复选框绑定同一个ref -->
<input type="checkbox" ref="checkboxGroup"> 选项1
<input type="checkbox" ref="checkboxGroup"> 选项2
<input type="checkbox" ref="checkboxGroup"> 选项3

脚本代码 #

选项式API

<script>
export default {
  methods: {
    handleUncheckAll() {
      this.$refs.checkboxGroup.forEach(el => {
        el.checked = false
      })
    }
  }
}
</script>

Vue3 <script setup> 语法

<script setup>
import { ref } from 'vue'
const checkboxGroup = ref([])
const handleUncheckAll = () => {
  checkboxGroup.value.forEach(el => {
    el.checked = false
  })
}
</script>

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