<!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. HDU1203(01背包)

    I NEED A OFFER! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  2. gulp前端自动化环境搭建详解

    1.安装 nodejs Grunt和所有grunt插件都是基于nodejs来运行的, https://nodejs.org/ 安装完成之后在终端 node -v 查看安装版本  npm -v 查看np ...

  3. Java：运算符的问题

    算术运算符: 算术运算符的注意问题 1. 如果对负数取模,可以把模数负号忽略不记,如:5%-2=1.但被模数是负数就另当别论. -5%3=-2:-5%-3=-2:符号跟被模数(左边). 2. 对于除号 ...

  4. python appium笔记（一）：appium android环境配置及示例

     (一) 简介 Appium是一个开源的自动化测试框架,可以用来测试基于iOS.Android和Firefox OS平台的原生和混合应用.该框架使用Selenium Webdriver,在执行测试时和 ...

  5. linux下opencv编译

    .tar.gz cd opencv-/ cd .. mkdir my_build_dir cd my_build_dir cmake ../opencv- -DWITH_GTK_2_X=ON -DCM ...

  6. python turtle 绘制图像

    def _circle(): t = turtle.Turtle() t.pencolor("yellow") t.pensize(5) t.speed(200) t.circle ...

  7. win10 安装microsoft.net framework3.5

    转载于:https://www.windows10.pro/win10-net-framework-3-5/ 之前手残不小心把microsoft.net framework3.5删了,结果导致Sql ...

  8. php notes

    1. foreach中的引用 <?php $arr = array(1, 2, 3, 4); foreach ($arr as &$value) { $value = $value * ...

  9. 错误: 未能完成程序集的安装(hr = 0x8007000b),.net程序关于使用Oracle.DataAccess.dll不同版本x86和x64问题，即oracle odp.net 32位/64位版本的问题

    如果你的机器上安装了odp.net,且确信machine.config也有类似以下结节:(64位+.net 4.0环境下,machine.config可能会有4份,分别对应于.net2.0/4.0的3 ...

  10. python_距离测量

    之所以写这个,其实就是希望能对距离有一些概念,当然这个也是很基础的,不过千里之行始于足下嘛,各种路径算法,比如a*什么的都会用到这个 距离测量有三种方式 1.欧式距离,这个是最常用的距离测量方式 (( ...