本文详细讲解如何使用原生JavaScript和Vue.js实现复选框的全选与反选功能。通过监听change事件，原生JS利用DOM遍历同步选中状态，Vue.js则结合v-model与计算逻辑实现数据驱动的双向绑定，并处理全选状态与单项选择的同步更新。
简介
在JavaScript开发中，复选框的全选与反选操作主要依赖DOM元素的操作及事件监听机制来完成。
全选功能的逻辑是：当用户点击标记为“全选”的复选框时，页面内所有具备相同类名的复选框将自动同步为选中状态。
反选功能的逻辑是：当用户点击“反选”复选框时，系统会反转每个复选框的状态，即已选中的变为未选中，未选中的变为选中。
下文将分别展示使用原生JavaScript和Vue.js框架的具体实现方案。
一、JavaScript原生实现
1、先看效果
2、html部分
<div class="test_checks">
<h2>JavaScript原生全选、反选功能</h2>
<input type="checkbox" id="selectAll" /> Select All
<br />
<br />
<input type="checkbox" class="checkbox" /> Item 1
<br />
<input type="checkbox" class="checkbox" /> Item 2
<br />
<input type="checkbox" class="checkbox" /> Item 3
<br />
</div>
首先，为id为selectAll的复选框绑定change事件监听器。当用户点击该复选框触发事件时，执行处理函数：遍历页面上所有class为checkbox的复选框，将其checked属性设置为与selectAll复选框当前状态一致的值。
document.getElementById("selectAll").addEventListener("change", function () {
var checkboxes = document.getElementsByClassName("checkbox");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
}
});
其次，为每个单独的复选框绑定change事件监听器。当点击某个子项触发事件时，初始化allChecked变量为true，随后遍历所有复选框；若发现任意一个复选框未被选中，则将allChecked设为false并跳出循环。最后，将selectAll复选框的checked属性更新为allChecked的值，以同步全选框的状态。
var checkboxes = document.getElementsByClassName("checkbox");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("change", function () {
var allChecked = true;
for (var j = 0; j < checkboxes.length; j++) {
if (!checkboxes[j].checked) {
allChecked = false;
break;
}
}
document.getElementById("selectAll").checked = allChecked;
});
}
5、完整代码
<div class="test_checks">
<h2>JavaScript原生全选、反选功能</h2>
<input type="checkbox" id="selectAll" /> Select All
<br />
<br />
<input type="checkbox" class="checkbox" /> Item 1
<br />
<input type="checkbox" class="checkbox" /> Item 2
<br />
<input type="checkbox" class="checkbox" /> Item 3
<br />
</div>
<script>
document
.getElementById("selectAll")
.addEventListener("change", function () {
var checkboxes = document.getElementsByClassName("checkbox");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
}
});
var checkboxes = document.getElementsByClassName("checkbox");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("change", function () {
var allChecked = true;
for (var j = 0; j < checkboxes.length; j++) {
if (!checkboxes[j].checked) {
allChecked = false;
break;
}
}
document.getElementById("selectAll").checked = allChecked;
});
}
</script>
二、Vue.js实现
1、先看效果
2、html部分
<div>
<!-- 全选按钮 -->
<input
type="checkbox"
v-model="checkAllFlag"
@change="choseCheckAll"
/>
<!-- 可选项目列表 -->
<ul>
<li v-for="(item, index) in items" :key="index">
<input
type="checkbox"
v-model="checkedS"
:value="item.id"
@change="ChoseChecks"
/>
{{ item.name }}
</li>
</ul>
</div>
在全选按钮上绑定v-model至checkAllFlag状态变量，用于存储全选与否的状态；同时，为每个列表项的复选框绑定v-model至checkedS数组，该数组用于存储被选中项目的ID。
3、然后定义相关的数据类型
data() {
return {
checkAllFlag: false,
checkedS: [],
items: [
{ id: 1, name: "Item 1" },
{ id: 2, name: "Item 2" },
{ id: 3, name: "Item 3" },
{ id: 4, name: "Item 4" },
],
};
},
4、函数部分
methods: {
choseCheckAll() {
this.checkedS = this.checkAllFlag
? this.items.map((item) => item.id)
: [];
},
ChoseChecks(value) {
if (this.checkAllFlag && value) {
this.checkAllFlag = false;
} else if (
!this.checkAllFlag &&
this.checkedS.length === this.items.length &&
value
) {
this.checkAllFlag = true;
}
},
},
全选按钮绑定@change事件至choseCheckAll方法，该方法依据checkAllFlag的状态来更新所有列表项的选中状态。每个子项复选框的@change事件触发ChoseChecks方法，用于更新全选状态；当所有子项被选中或全部取消时，全选按钮的状态需相应同步。
5、注意事项
choseCheckAll 方法：
- 当全选按钮被选中时，通过this.items.map(item => item.id)获取所有项目ID并赋值给checkedS，从而实现全选。
- 当全选按钮被取消选中时，将checkedS重置为空数组，从而取消所有项目的选中状态。
ChoseChecks 方法：
- 当全选按钮已处于选中状态，且某个子项目被手动取消选中时，将checkAllFlag设为false，表示不再处于全选状态。
- 当全选按钮未选中，且当前已选中的项目数量等于总项目数减一，同时有新的项目被选中时，将checkAllFlag设为true，表示所有项目已被选中。此条件判断旨在避免在勾选最后一个未选中项时触发两次ChoseChecks，防止checkAllFlag被错误重置。
6、完整代码
<div class="test_checks">
<input
type="checkbox"
v-model="checkAllFlag"
@change="choseCheckAll"
/><span class="checkll_dom">全选</span>
<ul>
<li v-for="(item, index) in items" :key="index">
<input
type="checkbox"
v-model="checkedS"
:value="item.id"
@change="ChoseChecks"
/>
{{ item.name }}
</li>
</ul>
</div>
data() {
return {
checkAllFlag: false,
checkedS: [],
items: [
{ id: 1, name: "Item 1" },
{ id: 2, name: "Item 2" },
{ id: 3, name: "Item 3" },
{ id: 4, name: "Item 4" },
],
};
},
methods: {
choseCheckAll() {
this.checkedS = this.checkAllFlag
? this.items.map((item) => item.id)
: [];
},
ChoseChecks(value) {
if (this.checkAllFlag && value) {
this.checkAllFlag = false;
} else if (
!this.checkAllFlag &&
this.checkedS.length === this.items.length &&
value
) {
this.checkAllFlag = true;
}
},
}以上就是JavaScript实现全选与反选功能的详细内容，更多关于JavaScript全选反选的资料请关注本站其它相关文章！