<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue复选框的全选</title>
    </head>
    <body>
        <div id="app">
            <!-- 全选 -->
            <input type="checkbox" @click="checkAll()"><label>全选</label></br>

<!-- 单选 -->
            <div v-for="item in sports">
                <!--indexOf如果要检索的字符串值没有出现，则该方法返回 -1 -->
                <input type="checkbox" :checked="sportsIds.indexOf(item.id)>-1" @click="checkOne(sports.id)" /><label>{{item.name}}</label>
            </div>

</div>
        <script src="jquery.min.js"></script>
        <script src="vue.js"></script>
        <script>
            new Vue({
                el: "#app",
                data: {
                    sports: [{
                            id: 1,
                            name: "打篮球"
                        },
                        {
                            id: 2,
                            name: "太极拳"
                        },
                        {
                            id: 3,
                            name: "乒乓球"
                        },
                        {
                            id: 4,
                            name: "踢足球"
                        },
                        {
                            id: 5,
                            name: "棒球"
                        }
                    ],
                    sportsIds: [1, 3, 4],
                    isCheckAll: false
                },
                methods: {
                    checkAll: function() {
                        this.isCheckAll = !this.isCheckAll;
                        if (this.isCheckAll) {
                            this.sportsIds = []
                            for (var i = 0; i < this.sports.length; i++) {
                                this.sportsIds.push(this.sports[i].id);
                            }
                        } else {
                         this.sportsIds = []
                        }
                        console.log(this.sportsIds.length)
                    },
                    checkOne: function(sportsId) {
                        let idindex = this.sports.indexOf(sportsId);
                        if (idindex > 0) {
                            //如果以包含了该id,则去除(变为非选中状态)
                            this.sportsIds.splice(idindex, 1);
                        } else {
                            this.sportsIds.push(sportsId);
                        }
                    }
                }
            })
        </script>
    </body>
</html>

Vue复选框的全选的更多相关文章

  1. js实现复选框的全选、全不选、反选

    js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...

  2. JQ实现复选框的全选反选不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  4. 【jQuery】复选框的全选、反选，推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  5. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

  6. 【JavaScript】实现复选框的全选、全部不选、反选

    以较为简洁的程序实现复选框的全选.全部不选.反选 操作. 并且将可变的部分设置为JS的参数,以实现代码复用. 全选和全不选 第一个参数为复选框名称,第二个参数为是全选还是全部不选. function ...

  7. 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...

  8. jQuery学习(五)——使用JQ完成复选框的全选和全不选

    1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...

  9. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

随机推荐

  1. Three.js开发指南---粒子和粒子系统（第七章）

    使用粒子可以很容易的创建很多细小的物体,例如雨滴雪花等 本章主要内容: 1 使用ParticleBasicMaterial(基础粒子材质)来创建和设计粒子 2 使用ParticleSystem来创建一 ...

  2. openstack-on-centos7之各组件服务

    认证服务keystone(安装和配置) 在配置 OpenStack 身份认证服务前,必须创建一个数据库和管理员令牌 [用数据库连接客户端以root用户连接到数据库服务] # mysql -u root ...

  3. js-ES6学习笔记-Reflect

    1.Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API.Reflect对象的设计目的有这样几个. 将Object对象的一些明显属于语言内部的方法(比如Object.d ...

  4. Ajax发送POST请求对数据的封装

    Ajax发送POST请求把数据到后端后,后端收到数据并解析出来 示列一: Ajax发送请求,这里主要是发送一个数组的数据类型到后端,如果没有先把数组进行格式化成字符串的话,后端就收了就是一个字符串类型 ...

  5. css 单行/多行文字垂直居中问题

    例子可以直接看这里http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html 这篇文章中有一点点解释http://blo ...

  6. singleInstance和singleTask导致startActivityForResult回调失败

    先来了解下这两种启动模式: 1.singleInstance,全局唯一,它的实例在全局(即在众多任务栈中)是唯一的,它单独地存在于属于自己的任务栈中,而且这个任务栈没有其他实例. 2.singleTa ...

  7. 大数据【四】MapReduce（单词计数；二次排序；计数器；join；分布式缓存）

       前言: 根据前面的几篇博客学习,现在可以进行MapReduce学习了.本篇博客首先阐述了MapReduce的概念及使用原理,其次直接从五个实验中实践学习(单词计数,二次排序,计数器,join,分 ...

  8. 【Redis】Redis学习（五） Redis cluster模式详解

    一般情况下,使用主从模式加Sentinal监控就可以满足基本需求了,但是当数据量过大一个主机放不下的时候,就需要对数据进行分区,将key按照一定的规则进行计算,并将key对应的value分配到指定的R ...

  9. 用JS实现控制浏览器F12与右键功能

    本文出至:新太潮流网络博客 用JS实现控制浏览器F12与右键功能,防止恶意窃取代码,或其他直接复制进去就好 //禁用右键 document.oncontextmenu = function () { ...

  10. 单例模式实现 Volitile ， interlocked

    //单例模式: //1. 双检锁机制 Volatile.write() //2. 静态变量 //3. Interlocked.CompareExchange(ref single, temp, nul ...