js事件---同一个事件实现全选与反选功能
背景:
点击头部按钮,实现全选与反选功能
1.绑定事件,把当前勾选状态传递给方法 $event
<el-checkbox v-model="ModelCheckAll" class="ft" @change="CheckAll($event)">选择全部</el-checkbox>
2.定义事件
CheckAll($event) {
//判断,如果为选中状态,把tick的值全部赋值为true
if ($event) {
for (let i = ; i < this.StepsListData.length; i++) {
this.StepsListData[i].tick = true //实现全选
}
} else { //如果不是全选状态
for (let i = ; i < this.StepsListData.length; i++) {
if (this.StepsListData[i].tick == true) { //就判断当前的tick值是否等于true //实现全选的切换
this.StepsListData[i].tick = false
} else if (this.StepsListData[i].tick == false) {
this.StepsListData[i].tick = true
}
}
}
},
数组结构:
如果只需要实现全选功能:
<el-checkbox v-model="ModelCheckAll" class="ft" @change="CheckAll">选择全部</el-checkbox>
for (let i = ; i < this.StepsListData.length; i++) {
this.StepsListData[i].tick = true //实现全选
}
js事件---同一个事件实现全选与反选功能的更多相关文章
- Delphi实现DBGrid全选和反选功能
Delphi实现Dbgrid全选和反选.清除全选的功能,不管是在Delphi下,还是在WEB开发中,这种功能都是很实用的,是进行数据批量操作的基础.本模块就是实现了为Delphi的DBGrid数据列表 ...
- 原生js中实现全选和反选功能
<!DOCTYPE html> <html> <head lang="en"> <meta char ...
- js实现表单项的全选、反选以及删除操作
<html> <head> <title>test</title> <script language="javascript" ...
- jQuery实现复选框的全选、反选功能
<ul id="list"> <li><label><input type="checkbox" value=&quo ...
- [原]vue实现全选,反选
用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中 ...
- 复选框全选、反选及根据值JS控制复选框默认选中事件
HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...
- JS实现全选、反选、不选
JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- [CSP-S模拟测试73]题解
A.小P的2048 作为一个看B哥玩了一个寒假的人这种题闭眼切好吧 模拟即可.程序模块化后直接复制粘贴. 说什么模拟不能复制粘贴的都没水平 #include<cstdio> #includ ...
- 20175126《Java程序设计》第十周学习总结
# 20175126 2016-2017-2 <Java程序设计>第十周学习总结 ## 教材学习内容总结 - 本周学习方式主要为手动敲代码并理解内容学习. -本周学习十二章,主要内容如下: ...
- PHP 常用自定义函数
模拟 POST.GET 请求 /** * 模拟post进行url请求 * @param string $url * @param string $param */ protected function ...
- sql查询某个时间内的数据
hour) 七天之前的数据 SELECT * FROM commodity_order where create_time <= (now()-INTERVAL 7 DAY) order by ...
- Tomcat安装后修改路径方法
tomcat+mysql+jdk 本地已经安装tomcat.mysql.jdk服务,需要更改安装目录由D盘改为C盘,方法如下 一.停止tomcat.mysql服务 二.安装文件由D盘拷贝到C盘,原D盘 ...
- cabal替代脚本
由于网络原因,直接使用cabal update不成功,只能自己写脚本直接从网上拖包下来,自己安装. 但是这样做的缺点是需要手动处理dependency,当然,也可以把脚本写的复杂些,自动来处理depe ...
- Get The Treasury【HDU-3642】【扫描线】
题目链接 题目给出的是N个体积块,问的是有多少体积重叠了3次及以上? 那么就是怎么处理体积这样子的问题了,看到Z的种类不多的时候,就想着从Z离散化的角度去考虑这个问题了,然后就是怎样子去处理面积了,这 ...
- vue中修改了数据但视图无法更新的情况(转)
原文地址:https://blog.csdn.net/qq_39985511/article/details/79778806
- Python中的内置函数和匿名函数
1. 内置函数 print用法 def print(self, *args, sep=' ', end='\n', file=None): # known special case of print ...
- python-前端Jquery
Jquery 高级版javascript 提供了更加便利的js使用方式 楔子 需求二:将上面的li标签实现隔行换色效果 js代码 <script> var obj = document.g ...