记录一下

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 >= ) {
// 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
this.items.splice(idIndex, )
} 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" />

vue实现checked 全选功能的更多相关文章

  1. vue中实现全选功能

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue ...

  2. 第八十二篇:Vue购物车(三) 实现全选功能

    好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...

  3. Vue的全选功能实现思路

    全选功能的实现主要分两步: 1. 点击全选框选中所有选择框. 2. 当所有选择框都被选中时,勾选全选框. 详细思路: 1. 点击全选框选中所有选择框: 给全选框绑定一个值,然后添加change时间,当 ...

  4. 用Vue实现一个全选指令

    最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...

  5. checked 全选 反选 示例

    不多说看例子: 右上侧全选,然后每个栏又有一个栏目全选. 反选解决办法: function selectSubscibe(_class) { $("." + _class + &q ...

  6. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

  7. C# winform中的datagridview控件标头加入checkbox,实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

  8. jquery实现全选功能

    主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...

  9. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

随机推荐

  1. 用adblock过滤页面上固定位置的悬浮窗

    现在各种网站都喜欢加入position:fixed的悬浮窗,这些悬浮窗可以是分享按钮,可以是二维码,可以是各种烦人的按钮. 因为这些悬浮窗未必是广告,所以adblock很少自动屏蔽它们. 可这些悬浮窗 ...

  2. Python--day60--jinjia2模块

  3. python基础五之字典

    python数据的可变性 通过数据的可变性,可将数据分为可变数据类型和不可变数据类型. 可变数据类型:list,dict (不可哈希) 不可变数据类型:元祖,bool,int,str (可哈希) py ...

  4. 21个项目玩转深度学习:基于TensorFlow的实践详解02—CIFAR10图像识别

    cifar10数据集 CIFAR-10 是由 Hinton 的学生 Alex Krizhevsky 和 Ilya Sutskever 整理的一个用于识别普适物体的小型数据集.一共包含 10 个类别的 ...

  5. C# 获取进程退出代码

    我需要写一个程序,让这个程序知道另一个程序是否正常退出,于是就需要获取这个进程的退出代码 在程序如果需要手动退出,可以设置当前的退出代码 static void Main(string[] args) ...

  6. 【hdu 1850】Being a Good Boy in Spring Festival

    Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  7. 【2016常州一中夏令营Day4】

    小 W 走迷宫[问题描述]小 W 被小 M 困在了一个方格矩阵迷宫里,矩阵边界在无穷远处,我们做出如下的假设:a. 每走一步时,只能从当前方格移动一格,走到某个相邻的方格上:b. 走过的格子立即塌陷无 ...

  8. RabbitMQ、Kafka、RocketMQ的优劣势

    今天我们一起来探讨: 全量的消息队列究竟有哪些? Kafka.RocketMQ.RabbitMQ的优劣势比较 以及消息队列的选型 最全MQ消息队列有哪些 那么目前在业界有哪些比较知名的消息引擎呢?如下 ...

  9. 如何学习Java基础

    Java是用于软件开发的最流行的编程语言,无论做自动化测试或者测试开发,Java依然是最重要的选项之一. 为什么要学习Java? Java很容易学习 Java是通用的,面向对象的,高性能,解释型,安全 ...

  10. leetcode.1275找出井字棋的获胜者

    A 和 B 在一个 3 x 3 的网格上玩井字棋. 井字棋游戏的规则如下: 玩家轮流将棋子放在空方格 (" ") 上.第一个玩家 A 总是用 "X" 作为棋子, ...