Check all checkboxes vuejs

Question

I'm displaying a list of users in a table, each row has a checkbox to select the user and the checkbox value is the user's ID. The selected IDs are in turn displayed in a span below the table.

How can I select all checkboxes and deselect all checkboxes on the click of a "select all" checkbox that I have in the header of my table? Do I interact with the DOM to do this or through the vue object, I'm thinking it should be the latter but quite unsure how to approach what appears to be an easy task?! Any help would be appreciated!

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

Rifki · Accepted Answer · 2016-06-27 17:20:20Z

I think @Jeremy's answer is cleaner way, but it require for checked property on each user object which is makes no sense if the data come from an API request.

Here is working and cleaner code for select/deselect all rows without having to add checked property on user object:

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>

Please note that the number attribute on row's checkbox is required, otherwise you have to push the user id selectAll method as a string, like selected.push(user.id.toString());

Whe can use the object as a key too. codepen.io/anon/pen/RJErOV?editors=1111

haakym · Accepted Answer · 2016-05-24 08:01:42Z

13

Adding my own answer as edits on the answer by nhydock weren't accepted (I think?).

Solution selects and selects all.

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

Working fiddle: https://jsfiddle.net/okv0rgrk/3747/

edited May 24, 2016 at 8:01

answered Dec 1, 2015 at 11:31

haakym

12.4k12 gold badges72 silver badges101 bronze badges

3 Comments

duXing Over a year ago

ISSUE: 1)select all; 2)Unselect one item. the SelectAll checkbox should become unselected.

haakym Over a year ago

@Sigma Good catch, I added a fix to the fiddle, perhaps not a great solution but it works. Feel free to post your own solution.

Kuldeep Singh Rathore Over a year ago

In method selectAll it should be "if(this.allSelected)" instead of "if(!this.allSelected)". There is no need to use ! .

D-Marc · Accepted Answer · 2020-05-03 04:34:23Z

6

Basically the same answer as @Rifki, but checks if each element exists in both, rather than just the length.

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() {
        if (this.users && this.users.length > 0) { // A users array exists with at least one item
          let allChecked = true;

          for (const user of this.users) {
            if (!this.selected.includes(user.id)) {
              allChecked = false; // If even one is not included in array
            }
            
            // Break out of loop if mismatch already found
            if(!allChecked) break;
          }

          return allChecked;
        }

        return false;
      },
      set(value) {
        const checked = [];

        if (value) {
          this.users.forEach((user) => {
            checked.push(user.id);
          });
        }

        this.selected = checked;
      }
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/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>

edited May 3, 2020 at 4:34

answered Nov 22, 2019 at 3:45

D-Marc

3,1675 gold badges24 silver badges32 bronze badges

2 Comments

abhilash-ram Over a year ago

While deselecting the parent checkbox, all the child checkbox are unselected. Can you update your answer Vue version: "^2.6.10",

D-Marc Over a year ago

Maybe I'm misunderstanding what you're saying, but that's the desired result for the question asked.

Jeremy · Accepted Answer · 2016-05-26 04:20:51Z

5

How about my answer, with less properties, easy to understand?

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>

answered May 26, 2016 at 4:20

Jeremy

1041 silver badge3 bronze badges

2 Comments

haakym Over a year ago

I guess it relies on each data item having 'checked': false?

LeoYuan 袁力皓 Over a year ago

this.selectAll = !select; is unnecessary, 'cause this.selectAll will always rely on whether if all users' checked property have been checked~

jh-thank-you · Accepted Answer · 2017-06-26 21:36:02Z

I want to thank everyone for sharing their solutions. It has been a big help with learning. A developer on gitter helped me to add a Default checkbox that will select a subset of the array that has a property called "default" set to true.

here is the 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>

nhydock · Accepted Answer · 2015-11-06 16:47:41Z

3

All you have to do is add your users, using their ID since that's how you're referencing their values with the checkbox, and add them into your selected array.

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

Running JSFiddle

answered Nov 6, 2015 at 16:47

nhydock

2,4261 gold badge17 silver badges11 bronze badges

4 Comments

haakym Over a year ago

thanks for your reply. That works just great for selecting all the values, but how about deselecting?

haakym Over a year ago

I'm guessing I can check if the selected all is true or false and remove all from selected if false? Going to try in your fiddle.

haakym Over a year ago

Woo! Got it working, I'm going to update your answer a little, hope that's okay? Have updated your fiddle with the solution. Thanks for your help buddy

Nelson Katale Over a year ago

Good answer nhydock.

Alexey Riva · Accepted Answer · 2020-12-11 13:49:20Z

Here is the simplest solution with v-models and computed only. No additional arrays, @click, :checked needed.

HTML

<div id="app">
   <input type="checkbox" v-model="allSelected"> Select All

   <ul>
      <li v-for="user in users">
         <input type="checkbox" v-model="user.selected"> {{ user.name }}
      </li>
   </ul>

   <button @click="getSelectedUsers">Get Selected Users</button>
</div>

JS

new Vue({
  el: "#app",
  data: {
    users: [
      {
        id: 1,
        name: "Alda Myrrhine",
        selected: false,
      },
      {
        id: 2,
        name: "Amrita Rabi",
        selected: false,
      },
      {
        id: 3,
        name: "Ruza Alannah",
        selected: false,
      },
    ]
  },
  computed: {
    allSelected: {
      set (selected) {
        this.users.forEach(function (user) {
          user.selected = selected;
        });
      },
      get () {
        return this.users.every(function (user) {
          return user.selected;
        });
      }
    }
  },
  methods: {
    getSelectedUsers () {
      let users = this.users.filter((user) => {
        return user.selected;
      });
      
      console.log(users);
    }
  }
})

Note that you need property user.selected to exist from beginning (for example if you load data from API or elsewhere).

Working example: https://jsfiddle.net/y8gujf2p/

Richard Feliciano · Accepted Answer · 2018-12-06 15:30:01Z

1

i think this could be a little bit easier.

selectAll: function (isSelected) {
  if (!isSelected) {
    this.ids = []
    return false
  }
  if (isSelected) {
    this.rows.map(item => this.ids.push(item.id))
  }
}

answered Dec 6, 2018 at 15:30

Richard Feliciano

1451 gold badge2 silver badges10 bronze badges

Comments

Flik Shen · Accepted Answer · 2019-05-31 04:50:08Z

I have a more simple solution as following and it has all you want. The real data should be put into a map indexed the name as the label of checkbox for future easy to access.

<template>
  <div align="left">
    <div>
      <input type="checkbox" id="all" :checked="allNamesSelected" @click="selectAll()">
      <label for="all">All</label>
    </div>
    <div v-for="(name) in names" :key="name">
      <input type="checkbox" :id="name" :value="name" :check="isChecked(name)" v-model="selectedNames">
      <label :for="name">{{name}}</label>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            names: ['Automotive', 'Beauty', 'Branding', 'B to B'],
            selectedNames: [],
        }; 
    },
    computed: {
        allNamesSelected() {
            return this.names.length == this.selectedNames.length;
        },
    },
    methods: {
        selectAll() {
            if (this.allNamesSelected) {
                this.selectedNames = [];
            } else {
                this.selectedNames = this.names.slice();
            }
        },
        isChecked(name) {
            return this.selectedNames.includes(name);
        }
    }
}
</script>

Oleg Bolden · Accepted Answer · 2019-08-25 12:36:41Z

Often there is no need to display selected IDs below the table. In such cases the above code can be simplified to:

HTML

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

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]"}
        ],
        selectAll: false
    }
})

Collectives™ on Stack Overflow

Check all checkboxes vuejs

10 Answers 10

1 Comment

3 Comments

2 Comments

2 Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

1 Comment

3 Comments

2 Comments

2 Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related