checkbox 全選

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

摘要：下面是熱身測(cè)試下面是熱身的熱身部

<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、數(shù)組集合里的元素是否包含當(dāng)前checkbox的value也能控制勾選與否，

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

正文解釋：

return this.users ? this.selected.length == this.users.length : false;
1、users集合是否為空？為空直接不全選
2、已選擇的單選框的元素個(gè)數(shù)是否等于Users集合的元素個(gè)數(shù)
3、等于的話返回true，意思是已然全選；不等于返回false，不全選

云服務(wù)器 GPU云服務(wù)器 jquery全選checkBox CheckBox 表單checkbox 模擬checkbox

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/2062.html

相關(guān)文章

jQuery實(shí)現(xiàn)全選、反選和不選功能

摘要：當(dāng)勾選全選按鈕旁邊的復(fù)選框時(shí)，列表中的選項(xiàng)全部選中，反之取消勾選則列表中的選項(xiàng)全部為未選中狀態(tài)。全選或全不選全選全不選反選設(shè)置全選復(fù)選框獲取選中選項(xiàng)的值選項(xiàng)總個(gè)數(shù)全選不全選HTML 我們的頁(yè)面上有一個(gè)歌曲列表，列出多行歌曲名稱，并匹配復(fù)選框供用戶選擇，并且在列表下方有一排操作按鈕。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1.時(shí)間都去哪兒了 ...

番茄西紅柿 2019-04-23 11:43 評(píng)論0 收藏0
Jquery實(shí)現(xiàn)checkbox全選、取消全選和反選

摘要：最近在看廖雪峰的教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來(lái)了，現(xiàn)在分享出來(lái)，提供給小白學(xué)習(xí)。題目如下首先要獲取到全選和每一項(xiàng)的，然后通過(guò)邏輯代碼實(shí)現(xiàn)題目要求。最近在看廖雪峰的Jquery教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來(lái)了，現(xiàn)在分享出來(lái)，提供給小白學(xué)習(xí)。題目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...

wenzi 2019-08-22 15:56 評(píng)論0 收藏0
Jquery實(shí)現(xiàn)checkbox全選、取消全選和反選

摘要：最近在看廖雪峰的教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來(lái)了，現(xiàn)在分享出來(lái)，提供給小白學(xué)習(xí)。題目如下首先要獲取到全選和每一項(xiàng)的，然后通過(guò)邏輯代碼實(shí)現(xiàn)題目要求。最近在看廖雪峰的Jquery教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來(lái)了，現(xiàn)在分享出來(lái)，提供給小白學(xué)習(xí)。題目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...

高璐 2019-08-02 10:04 評(píng)論0 收藏0
使用el-checkbox實(shí)現(xiàn)全選，點(diǎn)擊失效沒(méi)有反應(yīng)

摘要：最近在公司接收到了一個(gè)需求，給收藏夾的書籍添加批量全選刪除實(shí)現(xiàn)思路點(diǎn)擊全選改變的，改變的，重新便利一下所有的來(lái)改變?nèi)x的該組件基本功能已經(jīng)實(shí)現(xiàn)，用的，苦于官網(wǎng)沒(méi)有這樣功能的，我按照上面的思路實(shí)現(xiàn)，但頭疼的是他只有事件，也就是說(shuō)在實(shí)現(xiàn)全選改最近在公司接收到了一個(gè)需求，給收藏夾的書籍添加批量、全選刪除實(shí)現(xiàn)思路：點(diǎn)擊全選改變item的checked，改變item的checked，重新便利一...

Binguner 2019-08-23 12:29 評(píng)論0 收藏0
電商購(gòu)物網(wǎng)站 - 購(gòu)物車結(jié)算

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

PingCAP 2019-06-26 17:18 評(píng)論0 收藏0