選中所有複選框vuejs

我在表格中顯示用戶列表，每行都有一個複選框以選擇用戶，複選框值是用戶的ID。選定的ID依次顯示在表格下方的範圍內。選中所有複選框vuejs

如何選中所有複選框並取消選中所有複選框，然後點擊表格標題中的「全選」複選框？我是否與DOM進行交互以做到這一點或通過vue對象，我認爲它應該是後者，但是很不確定如何處理看起來很容易的任務？！任何幫助，將不勝感激！

HTML

<div id="app"> 
    <h4>Users</h4> 
    <div> 
     <table> 
      <tr> 
       <th>Name</th> 
       <th>Select <input type="checkbox" @click="selectAll"></th> 
      </tr> 
      <tr v-for="user in users"> 
       <td>{{ user.name }}</td> 
       <td><input type="checkbox" v-model="selected" value="{{ user.id }}"></td> 
      </tr> 
     </table> 
    </div> 

    <span>Selected Ids: {{ selected| json }}</span> 
</div>

使用Javascript/Vuejs

new Vue({ 
    el: '#app', 
    data: { 
     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]"}, 
      { "id": "5", "name": "Brendon Rogahn", "email": "[email protected]"} 
     ], 
     selected: [] 
    }, 
    methods: { 
     selectAll: function() { 
      // ? 
     } 
    } 
})

來源

2015-11-06 haakym

加入我自己的答案是由nhydock答案編輯沒有被接受（我想？）。

解決方案選擇並選擇全部。

HTML

<div id="app"> 
    <h4>User</h4> 
     <div> 
      <table> 
       <tr> 
        <th>Name</th> 
        <th>Select <input type="checkbox" @click="selectAll" v-model="allSelected"></th> 
       </tr> 
       <tr v-for="user in users"> 
        <td>{{ user.name }}</td> 
        <td><input type="checkbox" v-model="userIds" value="{{ user.id }}"></td> 
       </tr> 
      </table> 
     </div> 

     <span>Selected Ids: {{ userIds | json }}</span> 
</div>

使用Javascript/Vuejs

new Vue({ 
    el: '#app', 
    data: { 
     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]"}, 
      { "id": "5", "name": "Brendon Rogahn", "email": "[email protected]"} 
     ], 
     selected: [], 
     allSelected: false, 
     userIds: [] 
    }, 
    methods: { 
     selectAll: function() { 
      this.userIds = []; 

      if (!this.allSelected) { 
       for (user in this.users) { 
        this.userIds.push(this.users[user].id); 
       } 
      } 
     }, 
    } 
})

工作小提琴：https://jsfiddle.net/okv0rgrk/3747/

來源

2015-12-01 11:31:20 haakym

問題：1）全選; 2）取消選擇一個項目。 SelectAll複選框應該變爲未選中狀態。 – Sigma

@Sigma良好的捕獲，我給小提琴增加了一個修復，也許不是一個很好的解決方案，但它的工作原理。隨意發佈您自己的解決方案。 – haakym

在方法selectAll中，它應該是「if（this.allSelected）」而不是「if（！this.allSelected）」。沒有必要使用！。 –

所有您需要做的就是添加用戶，使用他們的ID，因爲這是你如何與引用它們的值複選框，並將它們添加到您選擇的陣列中。

selectAll: function() { 
    this.selected = []; 
    for (user in this.users) { 
     this.selected.push(this.users[user].id); 
    } 
}

Running JSFiddle

來源

2015-11-06 16:47:41 nhydock

感謝您的回覆。這對於選擇所有的值非常有用，但取消選擇怎麼樣？ – haakym

我猜我可以檢查是否所選的全部是真或假，並刪除所有選定的，如果錯誤？去嘗試你的小提琴。 – haakym

嗚！得到它的工作，我會稍微更新你的答案，希望沒關係？已經用你的解決方案更新了你的小提琴。謝謝你的幫助哥們 – haakym

怎麼樣我的答案，以較少的特性，易於理解的？

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    users: [{ 
 
     "id": "1", 
 
     "name": "Shad Jast", 
 
     "email": "[email protected]", 
 
     'checked': false 
 
    }, { 
 
     "id": "2", 
 
     "name": "Duane Metz", 
 
     "email": "[email protected]", 
 
     'checked': false 
 
    }, { 
 
     "id": "3", 
 
     "name": "Myah Kris", 
 
     "email": "[email protected]", 
 
     'checked': false 
 
    }, { 
 
     "id": "4", 
 
     "name": "Dr. Kamron Wunsch", 
 
     "email": "[email protected]", 
 
     'checked': false 
 
    }, ], 
 

 
    }, 
 
    computed: { 
 
    selectAll: function() { 
 
     return this.users.every(function(user){ 
 
     return user.checked; 
 
     }); 
 
    } 
 
    }, 
 
    methods: { 
 
    toggleSelect: function() { 
 
     var select = this.selectAll; 
 
     this.users.forEach(function(user) { 
 

 
     user.checked = !select; 
 

 
     }); 
 
     this.selectAll = !select; 
 
    }, 
 

 
    } 
 
});

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> 
 

 
<div id="app"> 
 
    <h4>User</h4> 
 
    <div> 
 
    <table> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Select 
 
      <input type="checkbox" @click="toggleSelect" :checked="selectAll"> 
 
     </th> 
 
     </tr> 
 
     <tr v-for="user in users"> 
 
     <td>{{ user.name }}</td> 
 
     <td> 
 
      <input type="checkbox" v-model="user.checked"> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
</div>

來源

2016-05-26 04:20:51 Jeremy

我想它依賴於每個有'檢查'的數據項：false'？ – haakym

'this.selectAll =！select;'是不必要的'，因爲this.selectAll將始終依賴於是否所有用戶的已檢查屬性都已被檢查〜 –

我覺得@傑里米的答案是清潔的方式，但它需要爲每個用戶對象，它是沒有意義的，如果數據來自API的請求上checked財產。

這裏工作和選擇更清晰的代碼/取消選擇所有行，而無需用戶對象上添加checked屬性：

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     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: [] 
 
    }, 
 
    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 src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> 
 

 
<div id="app"> 
 
<h4>User</h4> 
 
<div> 
 
    <table> 
 
     <tr> 
 
      <th><input type="checkbox" v-model="selectAll"></th> 
 
      <th align="left">Name</th> 
 
     </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> 
 
</div> 
 
</div>

請注意，需要對行的複選框number屬性，否則您必須將用戶標識selectAll方法作爲字符串推送，如selected.push(user.id.toString());

來源

2016-06-25 23:21:00 Rifki

非常聰明和乾淨的解決方案:)謝謝。 p.s.首先this.selected =選中;是還原劑 –

@KarolFiturski啊是的，謝謝你的領導，會更新它。 – Rifki

user.id.toString（）男人你真的救了我的命。 3小時左右 – TheMan68

我想t要求每個人分享他們的解決方案。這對學習有很大的幫助。 gitter上的開發人員幫助我添加了一個Default複選框，該複選框將選擇一個名爲「default」的屬性設置爲true的數組的子集。

這裏是代碼：

// based on https://jsfiddle.net/okv0rgrk/3747/ 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     selected: [], 
 
     defaultSelects: [], 
 
     selectsArray: [ 
 

 
      {id: 'automotive', name: 'Automotive', class: 'industry', default: false}, 
 

 
      {id: 'beauty', name: 'Beauty', class: 'industry', default: true}, 
 

 
      {id: 'branding', name: 'Branding', class: 'industry', default: true}, 
 

 
      {id: 'btob', name: 'B to B', class: 'industry', default: false} 
 
     ], 
 
     selected: [], 
 
    }, 
 
    computed: { 
 
     defaultChecked: { 
 
     get() { 
 
      let defaults = this.selectsArray.filter(item => item.default).map(item => item.id) 
 
      const hasAllItems = (baseArr, haystack) => haystack.every(item => baseArr.includes(item)) 
 
      const hasSameItems = (baseArr, haystack) => hasAllItems(baseArr, haystack) && hasAllItems(haystack, baseArr) 
 
      return hasSameItems(this.selected, defaults) 
 
     }, 
 
     set (value) { 
 
      this.selected = [] 
 

 
      if (value) { 
 
      this.selectsArray.forEach((select) => { 
 
       if (select.default) { 
 
       this.selected.push(select.id) 
 
       } 
 
      }); 
 
      } 
 
     } 
 
     }, // END defaultChecked 
 
     selectAll: { 
 
     get() { 
 
      return this.selected.length === this.selectsArray.length 
 
     }, 
 
     set (value) { 
 
      this.selected = [] 
 

 
      if (value) { 
 
      this.selectsArray.forEach((select) => { 
 
       this.selected.push(select.id) 
 
      }) 
 
      } 
 
     } 
 
     }, // END selectAll 
 
    } 
 
})

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> 
 

 
<div id="app"> 
 
      
 
<div id="default-settings"> 
 

 
<label class="pref-button"><input type="checkbox" v-model="defaultChecked"><span>Default</span></label> 
 

 
<label class="pref-button"><input type="checkbox" v-model="selectAll"><span>Select All</span></label> 
 

 
</div>  
 
      
 
<label :for="select.id" v-for="select in selectsArray" v-bind:key="select.id"><input :value="select.id" v-model="selected" :id="select.id" :sector="select.id" :class="select.class" :default="select.default" type="checkbox">{{ select.name }}</label> 
 

 
<span>Selected Ids: {{ selected }}</span> 
 
    
 
</div>

來源

2017-06-26 21:36:02

選中所有複選框vuejs

回答

相關問題