vue实现checked 全选功能

亦凉 2021-11-10 14:44 339阅读 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 条评论，339人围观）

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

相关阅读

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

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

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

相关 vue中全选功能的实现

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

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

相关 jQuery实现全选反选功能

用jQuery实现全选反选功能要求要求1：点击全选的checkbox，让下面所有人名前的checkbox的选中状态和全选的一致要求2：点击反选按钮，所有人名

迷南。/ 2023年06月25日 06:05/ 0 赞/ 25 阅读

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

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

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

相关 JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下：

旧城等待，/ 2022年07月14日 14:09/ 0 赞/ 343 阅读

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

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

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

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

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

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

相关 vue实现checked 全选功能

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

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

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

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

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

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

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

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