Skip to content

Instantly share code, notes, and snippets.

@edwardlorilla

edwardlorilla/how-to-select-vuejs-check-all-uncheck-all-checkboxes.markdown

Last active January 17, 2023 14:50
Show Gist options
  • Save edwardlorilla/d8cfe1d40f2514ca13c8eaaae7657a3e to your computer and use it in GitHub Desktop.
Save edwardlorilla/d8cfe1d40f2514ca13c8eaaae7657a3e to your computer and use it in GitHub Desktop.
Download ZIP
HOW TO SELECT VUEJS CHECK ALL UNCHECK ALL CHECKBOXES
Raw
index.html
<div class="container">
<div id="app">
<h4>Names</h4>
<div>
<table class="table">
<tr>
<th><input type="checkbox" v-model="checkAll"></th>
<th align="center">ID</th>
<th align="center">Names</th>
</tr>
<tr v-for="lang in langs">
<td>
<input type="checkbox" v-model="checked" :value="lang.id" number>
</td>
<td> {{ lang.id }}</td>
<td> {{ lang.name }}</td>
</tr>
</table>
</div>
</div>
</div>
Raw
script.js
new Vue({
data: {
langs: [
{ "id": "1", "name": "Edward"},
{ "id": "2", "name": "Lance"},
{ "id": "3", "name": "Arellano"},
{ "id": "4", "name": "Lorilla"},
],
checked: []
},
computed: {
checkAll: {
get: function () {
return this.langs ? this.checked.length == this.langs.length : false;
},
set: function (value) {
var checked = [];
if (value) {
this.langs.forEach(function (lang) {
checked.push(lang.id);
});
}
this.checked = checked;
}
}
}
}).$mount('#app');
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
@yoel3imari
Copy link

hello Edward thank you for thsi solution
I would appreciate it if you can convert this code to Vue 3 with setup script

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment