记录一下

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. UVA 1343 - The Rotation Game-[IDA*迭代加深搜索]

    解题思路: 这是紫书上的一道题,一开始笔者按照书上的思路采用状态空间搜索,想了很多办法优化可是仍然超时,时间消耗大的原因是主要是: 1)状态转移代价很大,一次需要向八个方向寻找: 2)哈希表更新频繁: ...

  2. SELECT command denied to user 'username'@'ip' for table 'user'错误处理

    错误信息 使用RDS for MySQL,程序执行查询SQL时报错如下: SELECT command denied to user 'username'@'ip' for table 'user' ...

  3. java 综合示例代码

    package javaenhance.src.cn.itcast.day3; import java.lang.reflect.Constructor; import java.lang.refle ...

  4. jquery 选择多级父子元素

    <div class="box"> <div class="item"> <div class="out"&g ...

  5. Linux 设备模型

    在 2.5 开发循环中一个声明的目标是为内核创建一个统一的设备模型. 之前的内核没有单一的数据结 构, 使它们可以来获取关于系统如何整合的信息. 尽管缺乏信息, 有时事情也进行的不错. 新系统, 带 ...

  6. 【47.40%】【BZOJ 1875】[SDOI2009]HH去散步

    Time Limit: 20 Sec  Memory Limit: 64 MB Submit: 1363  Solved: 646 [Submit][Status][Discuss] Descript ...

  7. php 上传文件并对上传的文件进行简单验证(错误信息,格式(防伪装),大小,是否为http上传)

    <body> <?php /** *验证错误 *如果有错,就返回错误,如果没错,就返回null */ function check($file) { //1:验证是否有误 if($f ...

  8. boostrap-非常好用但是容易让人忽略的地方【4】:Font Awesome

    font-awesome基本用法 官方代码传送门 font-awesome在bootstrap中的特殊用法(这个才是重点) 要点归纳1(官方) 官方代码传送门 要点归纳2(我的) <a href ...

  9. 博客同步到CSDN客户端

    同步本人博客到CSDN客户端 http://blog.csdn.net/johnnyz1234

  10. 聊聊多线程哪一些事儿(task)之 一

    多线程,一个多么熟悉的词汇,作为一名程序员,我相信无论是从事什么开发语言,都能够轻轻松松说出几种实现多线程的方式,并且在实际工作种也一定用到过多线程,比如:定时器.异步作业等等,如果你说你没有用过多线 ...