JavaScript实现全选与反选功能

2024-04-19 0 14
目录
  • 简介
  • 一、JavaScript实现
  • 二、Vue.Js实现

简介

在JavaScript中,实现全选和反选通常是通过操作DOM元素和事件监听来实现;

全选功能:当用户点击一个“全选”复选框时,页面中所有具有相同类名的复选框都将被选中;

反选功能:用户点击一个“反选”复选框时,已选中的将变为未选中,未选中的将变为选中。

这里分别用原生JS和Vuejs实现一下

一、JavaScript实现

1、先看效果

JavaScript实现全选与反选功能

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、先看效果

JavaScript实现全选与反选功能

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全选反选的资料请关注悠久资源网其它相关文章!

您可能感兴趣的文章:

  • JS实现的全选、全不选及反选功能【案例】
  • Js实现复选框的全选、全不选反选功能代码实例
  • JavaScript实现表单全选或反选效果
  • JavaScript实现全选或反选功能
  • JavaScript实现页面一键全选或反选

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript JavaScript实现全选与反选功能 https://www.u-9.cn/biancheng/javascript/187627.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务