vue实现checked 全选功能

亦凉 2021-11-10 14:44 395阅读 0赞

记录一下

module.data = {

* result: \{\}, items: \[\]  
//初始化全选按钮, 默认不选  
,isCheckedAll: false  
\};  
module.vue = new Vue(\{  
el: moduleId,  
data: module.data,  
methods: \{*

CheckItem: function (item) \{

console.log(item);//true
                let idIndex = this.items.indexOf(item) if (idIndex >= 0) { // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
                    this.items.splice(idIndex, 1) } else { // 选中该checkbox
                    this.items.push(item) } console.log(this.items); }, CheckAll: function () { console.log(module.data.result.Data); this.isCheckedAll = !this.isCheckedAll if (this.isCheckedAll) { // 全选时
                    this.items = [] this.result.Data.forEach(function (x) { this.items.push(x.Id) }, this) } else { this.items = [] } console.log(this.items); }

\}  
\});

<input type="checkbox" id="qx" v-on:click="CheckAll()" />全选

<input type="checkbox" name="ck" v-on:click="CheckItem(x.Id)" :checked="items.indexOf(x.Id)>=0" :value="x.Id" />

转载于:https://www.cnblogs.com/LiChen19951127/p/11050871.html

发表评论取消回复

表情：

评论列表（有 0 条评论，395人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）

首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。

缺乏、安全感/ 2024年04月22日 22:30/ 0 赞/ 205 阅读

相关 vue中全选功能的实现

在Vue中实现全选功能可以通过以下步骤完成： 1. 首先在data中定义一个选中状态的变量，比如`isChecked`，并将其初始化为false。 2. 在全选的chec

小灰灰/ 2024年03月25日 11:26/ 0 赞/ 132 阅读

相关 JavaScript实现全选、全不选、反选功能

效果图 ![20191011213342751.gif][] 代码部分： <!DOCTYPE html> <html> <head>

矫情吗；*/ 2023年06月06日 12:25/ 0 赞/ 13 阅读

相关 vue 全选，选中删除功能实现

<p> <input type="checkbox" @click="change" :checked="isSelectAll" /><spa

墨蓝/ 2023年03月01日 12:59/ 0 赞/ 14 阅读

相关 jQurey全选，反选，不全选功能实现

html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选，反选，不全选</t

╰+哭是因爲堅強的太久メ/ 2022年08月21日 10:53/ 0 赞/ 348 阅读

相关 Jquery 实现全选全不选功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>attr</title>

ゞ浴缸里的玫瑰/ 2022年06月05日 00:16/ 0 赞/ 434 阅读

相关 javascript实现全选，反选功能

今天看项目发现有全选和反选的按钮实现，比较感兴趣，从网上搜索了自己实现了一下实现的方式就是在我们的按钮中设置响应的事件，然后在我们的函数中，通过定义的多选按钮的na

淡淡的烟草味﹌/ 2022年05月17日 10:48/ 0 赞/ 376 阅读

相关 vue实现checked 全选功能

记录一下 module.data = { result: \{\}, items: \[\] //初始化全选按钮, 默认不选 ,isCheckedA

亦凉/ 2021年11月10日 14:44/ 0 赞/ 396 阅读

相关 jQuery中实现全选，全不选功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

蔚落/ 2021年09月18日 23:04/ 0 赞/ 508 阅读

相关 vue实现全选、全不选和部分选择功能

在开发项目的过程当中，特别是开发后台管理系统时，会有很多的数据等待管理员去统一管理，所以有时候还需要将一些数据导出，然后打印，这是很有必要的，因为数据可以帮助分析这个产品是否具

Dear 丶/ 2021年06月11日 15:12/ 0 赞/ 573 阅读