Check Uncheck All Checkboxes with Vue.js

Checkboxes are used on the page to allow the user to select multiple items from the list.

If the user wants to select all items then it needs to check all checkboxes one by one.

To make the selection process easier by adding a single checkbox and use it to check uncheck all checkboxes.

In this demonstration, I am using the model to check uncheck all checkboxes in Vue.js and read the checked values.

Download and Include
HTML
Script
Demo
Conclusion

1. Download and Include

Download Vue.js library from here or you can use CDN. Include the <script > in <head> section.

<script src='https://cdn.jsdelivr.net/npm/vue'></script>

2. HTML

Create a checkbox to check all checkboxes where define @click='checkAll()'. and v-model='isCheckAll'.

Using v-for directive to loop on langsdata and create a checkbox element. In the checkbox add v-bind:value='lang',v-model='languages' and @change='updateCheckall()'.

Use button to display selected checkboxes value on click by calling printValues() @click='printValues()'.

Completed Code

<div id='myapp'>
 
  <!-- Check All -->
  <input type='checkbox' @click='checkAll()' v-model='isCheckAll'> Check All

  <!-- Checkboxes list -->
  <ul>
    <li v-for='lang in langsdata'>
     <input type='checkbox' v-bind:value='lang' v-model='languages' @change='updateCheckall()'>{{ lang }}
    </li>
  </ul>

  <!-- Print -->
  <input type='button' @click='printValues()' value='Print Selected Values'>

  <br>
  Selected items : {{ selectedlang }}

</div>

3. Script

Define 4 variables in data options.

langsdata – An Array type variable that contains some values. This use on the v-for directive to create checkboxes.
isCheckAll – It is a boolean type variable. This use to find whether checkall checkbox checked or not.
languages – An Array type variable. It is used on the v-model directive of checkboxes.
selectedlang – It is used to store checked checkboxes value and display on the screen.

Define 3 methods –

checkAll – This method called when check all checkbox gets clicked.

Update value of this.isCheckAll and empty the this.languages.

If this.isCheckAll is true then loop on this.langsdata and initialize this.languages with this.langsdata[key].

updateCheckall – This method call when any checkbox checked state change. From here, change the state of check all checkbox. If all checkboxes are checked from the list then set checked to check all checkbox otherwise uncheck.

To do this compare this.language length with this.langsdata if it is equal then assign true to this.isCheckAll otherwise, assign false.

printValues – This method called when a button gets clicked.

Loop on this.languages and assign this.languages[key] in this.selectedlang.

Completed Code

var app = new Vue({
  el: '#myapp',
  data: {
    isCheckAll: false,
    langsdata: ["PHP","Vue.js","AngularJS","jQuery","JavaScript"],
    languages: [],
    selectedlang: ""
  },
  methods: {
    checkAll: function(){

      this.isCheckAll = !this.isCheckAll;
      this.languages = [];
      if(this.isCheckAll){ // Check all
        for (var key in this.langsdata) {
          this.languages.push(this.langsdata[key]);
        }
      }
    },
    updateCheckall: function(){
      if(this.languages.length == this.langsdata.length){
         this.isCheckAll = true;
      }else{
         this.isCheckAll = false;
      }
    },
    printValues: function(){
      this.selectedlang = "";
      // Read Checked checkboxes value
      for (var key in this.languages) {
         this.selectedlang += this.languages[key]+", "; 
      }
    }
  }
})

4. Demo

View Demo

5. Conclusion

Use the model to check uncheck multiple checkboxes but for this, you need to define array type variable and use in v-model.

You need to also define value in checkboxes.

To read the values loop on the model variable.

If you found this tutorial helpful then don't forget to share.

Check uncheck All Checkboxes with Vue.js

Contents

1. Download and Include

2. HTML

3. Script

4. Demo

5. Conclusion