// 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属性值。