我要评论简介
在javascript中，实现全选和反选通常是通过操作dom元素和事件监听来实现；
全选功能：当用户点击一个“全选”复选框时，页面中所有具有相同类名的复选框都将被选中；
反选功能：用户点击一个“反选”复选框时，已选中的将变为未选中，未选中的将变为选中。
这里分别用原生js和vuejs实现一下
一、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>
3、这里首先为selectall复选框添加了一个change事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与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;
}
});
4、这里在事件处理函数中，为每个复选框添加了一个change事件监听器。当用户点击某个复选框时，触发该事件。在事件处理函数中，首先设置allchecked变量为true，然后遍历所有复选框，如果发现有复选框没有被选中，将allchecked变量设置为false并跳出循环。最后，将selectall复选框的选中状态设置为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，该方法根据全选状态更新所有项目的选中状态。
每个可选项目的@change事件触发一个方法（如 chosechecks），用于更新全选状态，当所有项目都被选中或取消选中时，全选按钮的状态应相应改变。
5、注意事项
chosecheckall 方法：
- 当全选按钮被选中时，将所有项目的id（this.items.map(item => item.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全选反选的资料请关注代码网其它相关文章！
发表评论