vue.js check uncheck all checkboxes Example

CSS php Programming VueJs

Today, We want to share with you vue.js check uncheck all checkboxes Example.In this post we will show you select all checkbox using vuejs, hear for how to check checkbox is checked or not in vue js we will give you demo and example for implement.In this post, we will learn about Check uncheck All Checkboxes with Vue.js with an example.

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

vue.js check uncheck all checkboxes Example

There are the Following The simple About vue.js check uncheck all checkboxes Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop Check all checkboxes vuejs, so the vuejs toggle all checkboxes for this example is following below.

Step 1: Include vuejs library

At first we need to include vuejs Latest library file.

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

Step 2: JavaScript/vuejs Source Code:

This file All the Data contains the following JavaScript/vuejs Source codes.

var app = new Vue({
  el: '#myapp',
  data: {
    isSelectAll: false,
    langsdata: ["Mobile","Laptop","iPhone","Pendrive","CD-DVD"],
    products: [],
    checkedproduct: ""
  },
  methods: {
    checkAll: function(){

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

Step 3: HTML Source Code:

This file contains the following HTML Markup Source codes.

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

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

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

  <br>
  Selected items : {{ checkedproduct }}

</div>

Step 4: CSS Source Code

Following CSS Source codes are used for Check uncheck All Checkboxes with Vue.js.

body {
    height: 100%;
    font-size: 100%;
    margin: 0;
    padding: 0;
    font-family: "lusitana", serif;
    line-height: 1.5;
    background: #EEEDE8;
    color: #373B41;
    -webkit-font-smoothing: antialiased;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
}

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about vue.js check uncheck all checkboxes Example.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Simple Vue 2.0 Select All Checkbox
  2.   Multiple Image upload preview remove option
  3.   Check all checkboxes in vuejs
  4.   Remove null from array javascript Example
  5.   Vuejs how to Set default value to option value selected
  6.   How to Get last inserted ID using Laravel
  7.   Laravel Datatables edit Column HTML Source Code render
  8.   Laravel 6 CSRF Protection Token Examples
  9.   PHP cURL Http Authorization Pass Header Examples
  10.   Laravel Insert Update Delete in Eloquent ORM laravel

Leave a Reply

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