Vue JS Checkbox Checked Event Tutorial

Vue js checkbox checked event example; Through this tutorial, i am going to show you how to get checked checkbox value in vue js app with v-model.

How to Get Checked Checkbox Values in VUE JS

Follow the below steps and learn how to get checked checkbox value in vue js app with v-model:

Step 1 – Create New VUE JS App
Step 2 – Navigate to Vue Js App
Step 3 – Create Component
Step 4 – Add Component on App.vue

Step 1 – Create New VUE JS App

Run the following command on terminal to create new vue js app:

vue create my-app

Step 2 – Navigate to Vue Js App

Run the following command to enter your vue js app root directory:

cd my-app

Step 3 – Create Component

Go to /src/components directory and create a new component called checkbox-event.vue and add the following code into it:

<!DOCTYPE html>
<html>
<head>
  <title>Vue Js Get Checked Value of Checkbox If Use Array As A Model - Laratutorials.com</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-7 offset-md-2  ">
      <div class="card mt-5">
        <div class="card-header">
          <h5>Vue Js Get Checked Value of Checkbox If Use Array As A Model - Laratutorials.com</h5>
        </div>
        <div class="card-body">
          <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>
        </div>
      </div>
    </div>
  </div>
<script src='https://cdn.jsdelivr.net/npm/vue'></script>
<script>  
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]+", "; 
      }
    }
  }
})
</script>
</body>
</html>

Step 4 – Add Component on App.vue

Go to /src/ directory and App.vue file. And then add the following code into it:

<template>
    <CheckboxEvent></CheckboxEvent>
</template>
<script>
import CheckboxEvent from './components/CheckboxEvent';
export default {
  components: {
    CheckboxEvent
  }
}
</script>

Conclusion

Vue js checkbox checked event example. In this tutorial, you have learned how to get checked checkbox value in vue js app.