<!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. 2.Observer Pattern（观察者模式）

    Observer Pattern(观察者模式)定义: 在对象之间定义一对多的依赖,这样一来,当一个对象改变状态,依赖它的对象都会收到通知,并自动更新. 干说定义肯定没有举例理解的透彻.想到Observ ...

  2. BOM（JavaScript高程笔记）

    再次编辑于20160115 一.window对象 双重角色 JS访问浏览器窗口的接口 ECAMAscript规定的Global对象 1.全局作用域 所有在全局作用域中声明的变量.函数都会变成windo ...

  3. JSON 解析与封装

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.解析: var str = '{"name":"huangxiaojian&qu ...

  4. H5音乐播放器源码共享

    由于博客云后台管理工具写起东西来实在难受,所以直接共享源码了! https://pan.baidu.com/s/1XeRxlk7iv5qt1f16s64F9w   H5源码!暂时只支持手机适配,电脑端 ...

  5. MySql循环语句

    drop procedure if exists test_insert; DELIMITER ;; CREATE PROCEDURE test_insert () BEGIN DECLARE i I ...

  6. KOTLIN-1(常用网址)

    ---恢复内容开始--- 1.官网:http://kotlinlang.org/ 2.官方文档:https://kotlinlang.org/docs/reference 3.kotlin源码:htt ...

  7. Express4.X中的bin/www是作什么用的？为什么没有后缀？

    使用Express4.X的同学会发现,相比Express3.X初始化项目时多了一个bin目录,并且下面还有一个www文件,那么它们有什么用呢? 在Express 3.x中集成了很多中间件,www和ap ...

  8. .Net core 下的ConfigurationManager类正确引用方法

    大家在项目中经常会用到需要引用配置文件的情况,这也是我偶然间遇到的问题,菜鸟一枚,如有需纠正多谢指点. 正题 在不先引用using的情况下直接写 ConfigurationManager.AppSet ...

  9. Hibernate 二级缓存配置

    详见:https://www.cnblogs.com/Junsept/p/7324981.html Hibernate的cache管理: Cache就是缓存,它往往是提高系统性能的最重要手段,对数据起 ...

  10. leveldb源码分析--BloomFilter

    bloomfilter是leveldb中的一大性能利器,所以为了文章的表现完整性这里新启这么一篇文章.leveldb中的bloomfilter的实现在bloom.cc中,是一个较为简单的实现,所以就不 ...