checkbox 全选

madthumb 发布于2019-04-23 13:35 / 2724人阅读

摘要：下面是热身测试下面是热身的热身部

<template>
  <div class="hello">
    <table>
        <tr>
            <th><input type="checkbox" v-model="selectAll">th>
            <th align="left">Nameth>
        tr>
        <tr v-for="user in users">
            <td>
                <input type="checkbox" v-model="selected" :value="user.id" number>
            td>
            <td>{{ user.name }}td>
        tr>
    table>
    
    <hr><br><br>
    <input type="checkbox" v-model="flag"><br>
    <input type="checkbox" v-model="arr" value="1">
    <input type="checkbox" v-model="arr" value="2">
    <input type="checkbox" v-model="arr" value="3">
  div>
template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      users: [
        { id: "1", name: "Shad Jast", email: "pfeffer.matt@yahoo.com" },
        { id: "2", name: "Duane Metz", email: "mohammad.ferry@yahoo.com" },
        { id: "3", name: "Myah Kris", email: "evolkman@hotmail.com" },
        { id: "4", name: "Dr. Kamron Wunsch", email: "lenora95@leannon.com" }
      ],

　　　selected: [],


　　　// ** 下面是热身的  **
      flag: true,
      arr: ["1"]
    };
  },

  methods: {},

  computed: {
    selectAll: {
      get: function() {
        return this.users ? this.selected.length == this.users.length : false;
      },
      set: function(value) {
        var selected = [];
        if (value) {
          this.users.forEach(function(user) {
            selected.push(user.id);
          });
        }
        this.selected = selected;
      }
    }
  }
};
script>

热身部分解释：

1、v-model为true或者false能控制checkbox勾选与否，

v-model="flag"

2、数组集合里的元素是否包含当前checkbox的value也能控制勾选与否，

 v-model="arr" value="3"  意思是如果arr

正文解释：

return this.users ? this.selected.length == this.users.length : false;
1、users集合是否为空？为空直接不全选
2、已选择的单选框的元素个数是否等于Users集合的元素个数
3、等于的话返回true，意思是已然全选；不等于返回false，不全选

GPU云服务器云服务器 jquery全选checkBox CheckBox 表单checkbox 模拟checkbox

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2062.html

jQuery实现全选、反选和不选功能

摘要：当勾选全选按钮旁边的复选框时，列表中的选项全部选中，反之取消勾选则列表中的选项全部为未选中状态。全选或全不选全选全不选反选设置全选复选框获取选中选项的值选项总个数全选不全选HTML 我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一排操作按钮。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1.时间都去哪儿了 ...

番茄西红柿 2019-04-23 11:43 评论0 收藏0
Jquery实现checkbox全选、取消全选和反选

摘要：最近在看廖雪峰的教程，事件篇的练习题比较综合，研究了很久终于研究出来了，现在分享出来，提供给小白学习。题目如下首先要获取到全选和每一项的，然后通过逻辑代码实现题目要求。最近在看廖雪峰的Jquery教程，事件篇的练习题比较综合，研究了很久终于研究出来了，现在分享出来，提供给小白学习。题目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...

wenzi 2019-08-22 15:56 评论0 收藏0
Jquery实现checkbox全选、取消全选和反选

摘要：最近在看廖雪峰的教程，事件篇的练习题比较综合，研究了很久终于研究出来了，现在分享出来，提供给小白学习。题目如下首先要获取到全选和每一项的，然后通过逻辑代码实现题目要求。最近在看廖雪峰的Jquery教程，事件篇的练习题比较综合，研究了很久终于研究出来了，现在分享出来，提供给小白学习。题目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...

高璐 2019-08-02 10:04 评论0 收藏0
使用el-checkbox实现全选，点击失效没有反应

摘要：最近在公司接收到了一个需求，给收藏夹的书籍添加批量全选删除实现思路点击全选改变的，改变的，重新便利一下所有的来改变全选的该组件基本功能已经实现，用的，苦于官网没有这样功能的，我按照上面的思路实现，但头疼的是他只有事件，也就是说在实现全选改最近在公司接收到了一个需求，给收藏夹的书籍添加批量、全选删除实现思路：点击全选改变item的checked，改变item的checked，重新便利一...

Binguner 2019-08-23 12:29 评论0 收藏0
电商购物网站 - 购物车结算

摘要：通过查询用户所有商品并传入模板，条件用户，结算状态。贴出部分代码用户加入购物车按钮链接所对应路径的处理，如商品通过获取商品号并检测登陆用户状态。通过方法获取购物车商品模型。附上本电商网站项目的源码，供各位研究开发扩展欢迎提 1、添加视图和集合添加商品链接上节课程里我们已经实现了商品的添加和展示，接下来我们开始进行对商品的操作——加入购物车。首先，商品页的加入购物车按钮、购物车查看...

PingCAP 2019-06-26 17:18 评论0 收藏0