Aktivieren Sie alle Kontrollkästchen vuejs

Ich zeige eine Liste der Benutzer in einer Tabelle an, jede Zeile hat ein Kontrollkästchen, um den Benutzer auszuwählen, und der Wert des Kontrollkästchens ist die ID des Benutzers. Die ausgewählten IDs werden wiederum in einem Bereich unterhalb der Tabelle angezeigt.Aktivieren Sie alle Kontrollkästchen vuejs

Wie kann ich alle Kontrollkästchen aktivieren und alle Kontrollkästchen deaktivieren, wenn Sie auf das Kontrollkästchen "Alle auswählen" in der Kopfzeile meiner Tabelle klicken? Interagiere ich mit dem DOM, um dies oder durch das Vue-Objekt zu tun, denke ich, dass es Letzteres sein sollte, aber nicht ganz sicher ist, wie man sich einer scheinbar einfachen Aufgabe nähert ?! Jede Hilfe wäre willkommen!

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() { 
      // ? 
     } 
    } 
})

Quelle

2015-11-06 haakym

meine eigene Antwort Hinzufügen wie Änderungen auf der Antwort von nhydock nicht akzeptiert wurden (ich glaube?).

Lösung wählt und wählt alle aus.

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); 
       } 
      } 
     }, 
    } 
})

Arbeits Geige: https://jsfiddle.net/okv0rgrk/3747/

Quelle

2015-12-01 11:31:20 haakym

PROBLEM: 1) alle auswählen; 2) Wählen Sie einen Eintrag ab. Das SelectAll-Kontrollkästchen sollte deaktiviert werden. – Sigma

@Sigma Guter Fang, ich habe der Geige eine Lösung hinzugefügt, vielleicht keine großartige Lösung, aber es funktioniert. Fühlen Sie sich frei, Ihre eigene Lösung zu veröffentlichen. – haakym

In der Methode selectAll sollte "if (this.allSelected)" anstelle von "if (! This.allSelected)" sein. Es besteht keine Notwendigkeit zu verwenden! . –

Alles, was Sie tun müssen, ist Ihre Benutzer hinzufügen, deren ID verwenden, da das ist, wie Sie mit der ihre Werte sind Referenzierung Kontrollkästchen, und fügen Sie sie in das ausgewählte Array ein.

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

Running JSFiddle

Quelle

2015-11-06 16:47:41 nhydock

Dank für Ihre Antwort. Das funktioniert einfach großartig, um alle Werte auszuwählen, aber wie wäre es mit der Abwahl? – haakym

Ich vermute, ich kann überprüfen, ob die ausgewählte alle wahr oder falsch ist und alle aus der Auswahl entfernen, wenn falsch? Versuche es in deiner Geige. – haakym

Woo! Habe es funktioniert, ich werde deine Antwort ein wenig aktualisieren, hoffe das ist okay? Habe deine Geige mit der Lösung aktualisiert. Danke für Ihre Hilfe buddy – haakym

Wie wäre meine Antwort, mit weniger Eigenschaften, leicht zu verstehen?

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>

Quelle

2016-05-26 04:20:51 Jeremy

Ich denke, es hängt davon ab, dass jedes Datenelement "überprüft" hat: false? – haakym

'this.selectAll =! Select;' ist unnötig, denn this.selectAll wird immer darauf angewiesen, ob alle von den Benutzern überprüften Eigenschaften überprüft wurden ~ –

Ich denke, @ Jeremy Antwort sauberer Weg, aber es für checked Eigenschaft auf jedem Benutzer-Objekt erfordern, die keinen Sinn macht, ist, wenn die Daten von einer API-Anfrage kommen.

Hier arbeitet und saubereren Code für select/deaktivieren Sie alle Zeilen ohne auf Benutzerobjekt checked Eigenschaft hinzufügen zu müssen:

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>

Bitte beachten Sie, dass die number auf Checkbox Zeile des Attributs erforderlich ist , sonst müssen Sie die Benutzer-ID selectAll Methode als Zeichenfolge, wie selected.push(user.id.toString());

Quelle

2016-06-25 23:21:00 Rifki

sehr intelligente und saubere Lösung :) danke. p.s. zuerst this.selected = ausgewählt; ist redudant –

@KarolFiturski ah ja danke für heads up, wird es aktualisieren. – Rifki

user.id.toString() Mann du hast mir ernsthaft das Leben gerettet. 3 Stunden herumalbern – TheMan68

Ich möchte t drücken Hank alle für das Teilen ihrer Lösungen. Es war eine große Hilfe beim Lernen. Ein Entwickler auf Gitter hat mir geholfen, ein Standard-Kontrollkästchen hinzuzufügen, das eine Teilmenge des Arrays auswählt, bei dem eine Eigenschaft namens "default" auf "true" gesetzt ist.

hier ist der Code:

// 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>

Quelle

2017-06-26 21:36:02

Aktivieren Sie alle Kontrollkästchen vuejs

Antwort

Verwandte Themen