<input type="checkbox" class="checkbox" /> Item 1
<br />
<input type="checkbox" class="checkbox" /> Item 2
<br />
<input type="checkbox" class="checkbox" /> Item 3
<br />
#### 二、Vue.Js实现
#### 1、先看效果
![](https://img-blog.csdnimg.cn/direct/deb3787016ef4b69bbae5b1c20f3cbbf.gif)
#### 2、html部分
这里为全选按钮绑定一个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,表示所有项目已被选中。
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;
}
},
},
创作不易,感觉有用,就一键三连,感谢(●’◡’●)
自学几个月前端,为什么感觉什么都没学到??
这种现象在很多的初学者和自学前端的同学中是比较的常见的。
因为自学走的弯路是比较的多的,会踩很多的坑,学习的过程中是比较的迷茫的。
最重要的是,在学习的过程中,不知道每个部分该学哪些知识点,学到什么程度才算好,学了能做什么。
很多自学的朋友往往都是自己去找资料学习的,资料上有的或许就学到了,资料上没有的或许就没有学到。
这就会给人一个错误的信息就是,我把资料上的学完了,估计也-就差不多的了。
但是真的是这样的吗?非也,因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线,你可以参考。
还有很多的同学在学习的过程中一味的追求学的速度,很快速的刷视频,写了后面忘了前面,最后什么都没有学到,什么都知道,但是什么都不懂,要具体说,也说不出个所以然。
所以学习编程一定要注重实践操作,练习敲代码的时间一定要多余看视频的时间。