checkbox 全選

madthumb 發(fā)布于2019-04-23 13:35 / 2837人閱讀

摘要：下面是熱身測試下面是熱身的熱身部

<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: "[email protected]" },
        { id: "2", name: "Duane Metz", email: "[email protected]" },
        { id: "3", name: "Myah Kris", email: "[email protected]" },
        { id: "4", name: "Dr. Kamron Wunsch", email: "[email protected]" }
      ],

　　　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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/2062.html

jQuery實現全選、反選和不選功能

摘要：當勾選全選按鈕旁邊的復選框時，列表中的選項全部選中，反之取消勾選則列表中的選項全部為未選中狀態(tài)。全選或全不選全選全不選反選設置全選復選框獲取選中選項的值選項總個數全選不全選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
電商購物網站 - 購物車結算

摘要：通過查詢用戶所有商品并傳入模板，條件用戶，結算狀態(tài)。貼出部分代碼用戶加入購物車按鈕鏈接所對應路徑的處理，如商品通過獲取商品號并檢測登陸用戶狀態(tài)。通過方法獲取購物車商品模型。附上本電商網站項目的源碼，供各位研究開發(fā)擴展歡迎提 1、添加視圖和集合添加商品鏈接上節(jié)課程里我們已經實現了商品的添加和展示，接下來我們開始進行對商品的操作——加入購物車。首先，商品頁的加入購物車按鈕、購物車查看...

PingCAP 2019-06-26 17:18 評論0 收藏0