How to Select VueJs Check All Uncheck All Checkboxes

How to Select VueJs Check All Uncheck All Checkboxes

Today, We want to share with you How to Select VueJs Check All Uncheck All Checkboxes.
In this post we will show you How to Select / Deselect All Checkboxes using VueJs, hear for Check and Uncheck all checkbox using VueJs Example we will give you demo and example for implement.
In this post, we will learn about check and uncheck all checkbox using VueJs with an example.

Here I am Gonna to Display an example by which you can step By step understand working of VueJs Check All Uncheck All.

Include CDN

We have used Some CDN for Bootstrap and Vue JS so First You need Online internet connection for them to step by step work.

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

HTML Markup Languages

This is our index.html file that Data contains our sample Table that we are going to Check All Uncheck All.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.


Download Project Scripts

<body>
<div class="container">
  <h2>VueJs Check All Uncheck All Example</h2>
  <p>The Simple Example of the VueJs Check All Uncheck All</p>            
	<div id="pakaApp">
<h4>Language Names</h4>
<div>
    <table class="table">
        <tr>
            <th><input type="checkbox" v-model="checkAll"></th>
            <th align="center">Languages Names</th>
            <th align="center">Names</th>
			<th align="center">Author</th>
        </tr>
        <tr v-for="lang in langs">
            <td>
                <input type="checkbox" v-model="checked" :value="lang.id" number>
            </td>
            <td> {{ lang.lname }}</td>
            <td> {{ lang.name }}</td>
            <td> {{ lang.author }}</td>
        </tr>
    </table>
</div>
</div>
</div>
</body>

Script Data contains Files(index.js)

This contains our index.js scripts.

  ng-cut ng-copy ng-paste Events using Angular Example

new Vue({
    el: '#pakaApp',
    data: {
        langs: [ 
            { "id": "1", "lname": "Angularjs", "author": "Jaydeep Gondaliya", "name": "[email protected]" },
            { "id": "2", "lname": "ASP.NET", "author": "Krunal Sisodiya", "name": "[email protected]" }, 
            { "id": "3", "lname": "SEO", "author": "Ankit Kathiriya", "name": "[email protected]" }, 
            { "id": "4", "lname": "PHP", "author": "Mayur Dhameliya", "name": "[email protected]" }
        ],
        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;
            }
        }
    }
});

Full Example : vue js select all checkboxes

<!DOCTYPE html>
<html lang="en">
<head>
  <title>VueJs Check All Uncheck All Example</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.3.7/css/bootstrap.min.css">
  <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
</head>
<body>

<div class="container">
  <h2>VueJs Check All Uncheck All Example</h2>
  <p>The Simple Example of the VueJs Check All Uncheck All</p>            
	<div id="pakaApp">
<h4>Language Names</h4>
<div>
    <table class="table">
        <tr>
            <th><input type="checkbox" v-model="checkAll"></th>
            <th align="center">Languages Names</th>
            <th align="center">Names</th>
			<th align="center">Author</th>
        </tr>
        <tr v-for="lang in langs">
            <td>
                <input type="checkbox" v-model="checked" :value="lang.id" number>
            </td>
            <td> {{ lang.lname }}</td>
            <td> {{ lang.name }}</td>
            <td> {{ lang.author }}</td>
        </tr>
    </table>
</div>
</div>
</div>
<script>
new Vue({
    el: '#pakaApp',
    data: {
        langs: [ 
            { "id": "1", "lname": "Angularjs", "author": "Jaydeep Gondaliya", "name": "[email protected]" },
            { "id": "2", "lname": "ASP.NET", "author": "Krunal Sisodiya", "name": "[email protected]" }, 
            { "id": "3", "lname": "SEO", "author": "Ankit Kathiriya", "name": "[email protected]" }, 
            { "id": "4", "lname": "PHP", "author": "Mayur Dhameliya", "name": "[email protected]" }
        ],
        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;
            }
        }
    }
});
</script>
</body>
</html>

We hope you get an idea about Check Uncheck All Checkbox using VueJs
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

  Laravel 6 User Roles and Permissions Tutorial

We hope This Post can help you…….Good Luck!.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Vuejs Autocomplete Input Tags component
  2.   vue.js check uncheck all checkboxes Example
  3.   Laravel 5.7 Stripe Payment Gateway Example From Scratch
  4.   laravel 6 Retrieve data using jQuery Ajax
  5.   CKEditor Images Upload using Yii2 - TinyMCE
  6.   Vuejs how to Set default value to option value selected
  7.   Laravel 6 Eloquent ORM MVC Tutorial
  8.   Vue.js GET ajax request Fetch Data using PHP
  9.   VueJS Disable enable Selector Examples
  10.   Retrieve Multiple Checkbox Selected Options using VueJS

Leave a Reply

Your email address will not be published. Required fields are marked *