记录一下

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. [转]C#操作Memcached帮助类

    在VS中安装Memcached,直接在NuGet下搜索Memcached,选择第一个进行安装: 服务端资源下载地址:https://pan.baidu.com/s/1gf3tupl 接下来开始写程序, ...

  2. 关于移动端弹层下的body滚动

    关于移动端弹层下的body滚动 这个问题在移动端挺常见的,网上也有一些解决方法,现在笔者来总结一下:css的解决方案都有兼容问题,js是比较稳定的解决方法(虽然比较麻烦) ps: 本文的例子都是用vu ...

  3. win10 uwp 商业游戏 1.1.5

    本文是在win10 uwp 商业游戏 基础上继续开发,添加一些无聊的游戏 因为在发布几个月,下载量很少,小伙伴说游戏就玩不到几分钟就不想玩,于是我就想加入其他游戏 下面我来告诉大家如何在游戏中添加多个 ...

  4. dotnet core 使用 CoreRT 将程序编译为 Native 程序

    现在微软有一个开源项目 CoreRT 能通过将托管的 .NET Core 编译为单个无依赖的 Native 程序 这个项目现在还没发布,但是能尝试使用,可以带来很多的性能提升 使用 CoreRT 发布 ...

  5. 【GYM101409】2010-2011 ACM-ICPC, NEERC, Western Subregional Contest

    A-Area and Circumference 题目大意:在平面上给出$N$个三角形,问周长和面积比的最大值. #include <iostream> #include <algo ...

  6. vue中的computed和watch区别

    在vue.js官方文档中看到computed和watch获取全名的一个例子: var var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', ...

  7. codeforces 1183H 动态规划

    codeforces 1183H 动态规划 传送门:https://codeforces.com/contest/1183/problem/H 题意: 给你一串长度为n的字符串,你需要寻找出他的最长的 ...

  8. codeforces 1185G1 状压dp

    codeforces 1185G1. Playlist for Polycarp (easy version)(动态规划) 传送门:https://codeforces.com/contest/118 ...

  9. Mybase desktop7.3破解

    1.Mybase Desktop 7.3 安装包 百度云链接: 链接:https://pan.baidu.com/s/1mWZ2_Qmkf6aAX9CYgrN12A 提取码:vjw7 2.破解包 百度 ...

  10. Django框架之中间件MiddleWare

    Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出.中间件的设计为开发者提供了一种无侵入式的开发方式,增强了Django框架的健 ...