<!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. 封装7z软件实现批量文件或目录压缩

    哈哈,作为一个特别懒的运维人来说 兄弟我写了一个批量压缩文件或目录的小工具,用来批量压缩文件目录 弄一下,然后就不用管他了,后天看结果就好了 操作步骤: 1.选择想做压缩处理的根目录 2.选择你要的功 ...

  2. HDU2255(KB10-K 二分图最大权匹配)

    奔小康赚大钱 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  3. Codeforces500C(SummerTrainingDay01-G)

    C. New Year Book Reading time limit per test:2 seconds memory limit per test:256 megabytes input:sta ...

  4. Unix环境高级编程：fork, vfork, clone

    fork fork产生的子进程是传统意义上的进程,fork之后执行路径就互不关联了,一旦fork返回后面的代码就在不用的进程上下文中执行了.到底是子进程先执行还是父进程先执行一般是随机的或者依赖实现的 ...

  5. MySQL入门详解（一）---mysql的语言

    MySQL语言分为:DCL(数据库控制语言).DDL(数据库定义语言).DQL(数据库查询语言).DML(数据库操作语言),这一节我们先从mysql的语言开始. DCL:数据库控制语言,用来设置数据库 ...

  6. js-ES6学习笔记-async函数（3）

    1.await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中. 2.多个await命令后面的异步操作,如果不存在继发关系,最好 ...

  7. idea中连接oracle数据库打包

    问题:在使用idea连接oracle数据时发现oracle.jdbc.OracleDriver引用这个包报错,找不到包.解决方法:在idea的terminal命令框中输入如下命令.我的jar包的位置在 ...

  8. 关于flex布局兼容

    (做个记录) 一.W3C各个版本的flex 2009 version 标志:display: box; or a property that is box-{*} (eg. box-pack) 201 ...

  9. kvm 创建新虚拟机命virt-install 使用说明

    virt-install 命令说明 1.命令作用      建立(provision)新虚拟机   2.语法   virt-install [选项]... 3.说明(DESCRIPTION)   vi ...

  10. eclipse代码中每行的开始和结尾出现多余的特殊符号

    window -> preferences -> general -> editors -> text editors ->          show whitespa ...