In this post we will learn how to check uncheck all checkbox using Vue js. To check and uncheck all checkbox we will use v-model.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Select/DeSelect All Checkbox Using Vuejs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="container">
<h4 class="text-success">Select/DeSelect All Checkbox Using Vuejs</h4>
<div class="panel panel-primary">
<div class="panel-heading">Select/DeSelect All Checkbox Using Vuejs</div>
<form class="form-horizontal">
<div class="panel-body">
<input type="checkbox" v-model="selectAll" @click="select()" /> Select all
<div v-for='option in options' class="checkbox">
<label> <input type="checkbox" :value="option" v-model="selected" @change='updateCheckall()'>{{ option }}</label>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
options: ["OPTION1","OPTION2","OPTION3","OPTION4","OPTION5"],
selected: [],
selectAll: false
},
methods: {
select() {
this.selected = [];
if (!this.selectAll) {
for (let i in this.options) {
this.selected.push(this.options[i]);
}
}
},
updateCheckall: function(){
if(this.options.length == this.selected.length){
this.selectAll = true;
}else{
this.selectAll = false;
}
}
}
});
</script>
</body>
</html>