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.
Contents
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-fordirective 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-modeldirective 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
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.
Thanks, this was exactly what I was looking for
You’re welcome.
You saved my life. LOL. I’ve spent the past 7 hours trying to get this to work, but thank goodness I found this.
I’m glad you found it useful.
you saved my life.
thx so much!!
I’m glad you found it useful.
Thanks for your code.
Is it possible to make the checkboxes “unique”? -> checkbox click once like radio btns?
How / why does binding the v-model to an array work?