JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）

// Vue 示例代码
<template>
  <div>
    <input type="checkbox" @change="toggleAll" :checked="isAllChecked"/> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" :value="item" v-model="selectedItems"/>
      {{ item.name }}
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', checked: false },
        { id: 2, name: 'Item 2', checked: false },
        { id: 3, name: 'Item 3', checked: false },
        // ...更多项
      ],
      selectedItems: []
    };
  },
  computed: {
    isAllChecked() {
      return this.items.length === this.selectedItems.length;
    }
  },
  methods: {
    toggleAll(event) {
      if (event.target.checked) {
        this.selectedItems = this.items.slice();
      } else {
        this.selectedItems = [];
      }
    }
  }
};
</script>

// 原生 JavaScript 示例代码
document.getElementById('checkAll').addEventListener('change', function() {
  var checkboxes = document.querySelectorAll('input[type=checkbox]');
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i] !== this) {
      checkboxes[i].checked = this.checked;
    }
  }
});

以上代码提供了两种实现方式：一种是使用Vue框架实现，另一种是使用原生JavaScript实现。Vue版本中使用了v-for指令来循环渲染checkbox，并利用v-model实现了数据的双向绑定。原生JavaScript版本则是通过addEventListener方法监听全选checkbox的change事件，然后遍历页面上的所有checkbox，将其checked属性设置为全选checkbox的checked属性值。