<!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. django项目一 CRM表结构

    from django.db import models from django.contrib import auth from django.core.exceptions import Perm ...

  2. JS 词法作用域 p2

    关于js 还是写的简短些,利于个人理解: 先看一个例子: var a = 2; function fn(){ var a = 3; console.log(a); } fn(a); 说明:作用域查找会 ...

  3. python短信发送

    '''以云之讯平台为例:''' url = 'https://open.ucpaas.com/ol/sms/sendsms' # 账户sidsid = 'f0ad70b276a8b63eb44f415 ...

  4. NUnit单元测试示例

    单元测试的用法 1.下载NUnit软件 安装后打开界面如图: 2.新建测试项目 添加类库项目并在NuGet管理包中添加NUnit 这里添加NuGet的NUnit包要注意保持版本和之前下载的NUnit软 ...

  5. 将数据导入MongoDB集群与MySQL

    import sys import json import pymongo import datetime from pymongo import MongoClient client = Mongo ...

  6. JDK7下VisualVm插件无法链接到插件中心

      VisualVM 是一款免费的,集成了多个 JDK 命令行工具的可视化工具,它能为您提供强大的分析能力,对 Java 应用程序做性能分析和调优.这些功能包括生成和分析海量数据.跟踪内存泄漏.监控垃 ...

  7. HTML5详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. HTML5的介绍 Web 技术发展时间线 1991 HTML 1994 ...

  8. AWS CSAA -- 04 AWS Object Storage and CDN - S3 Glacier and CloudFront（三）

    021 Storage Gateway 022 Snowball 023 Snowball - Lab 024 S3 Transfer Acceleration

  9. 用 Windows Live Writer 写blog,This is Test……..

    1.下载  Windows Live Writer,百度一下下载地址,不在这里提供下载了. 2.选择安装,其它微软应用不需要就不要安装. 3.里面有很多用的插件很好玩的,点击添加插件.

  10. Linux之JDK1.8的安装

    这个最基础的,但是老是查了一次又查,干脆记起来吧. 一.下载jdk8 地址:http://www.oracle.com/technetwork/java/javase/downloads/index. ...