Vue JS Checkbox Checked Event Example

vue js checkbox checked event example. In this tutorial, you will learn how to get checked checkbox value in vue js app with v-model.

Checkboxes are used on the page to allow the user to select multiple items from the list.

This tutorial will guide you step by step on how to get checked checkbox value in vue js app. As well as, will make a simple example of how to get checked checkbox value in vue js app using v-model.

How to Get Checked Checkbox Values in VUE JS

Just follow the following 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

In this step, open your terminal and execute the following command to create new vue js app:

vue create my-app

Step 2 – Navigate to Vue Js App

In this step, open your terminal and execute the following command to enter your vue js app root directory:

cd my-app

Step 3 – Create Component

In this step, visit /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 - Tutsmake.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 - Tutsmake.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

In this step, visit /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.

Recommended VUE JS Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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