Retrieve Multiple Checkbox Selected Options using VueJS

Contents

In this Post We Will Explain About is Retrieve Multiple Checkbox Selected Options using VueJS With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to vuejs : Retrieve Multiple Checkbox Selected Options Example

In this post we will show you Best way to implement How to get multiple Check Box checked value in vuejs, hear for java script – Get value from multiple check-boxes in vuejs with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

vuejs – How to get multiple selected check box values

Include External Libs

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Retrieve Multiple Checkbox Selected Options using VueJS</title>
</head>
<body>
<h1>Retrieve Multiple Checkbox Selected Options using VueJS</h1>
<template v-for="name in program_names">
  <input type="checkbox" :id="name.value" :value="name.value" v-model="selectedLanguages">
  <label :for="name.value">{{ name.text }}</label>
  </template>
<hr>

<h2>retrieve my selected option for vuejs</h2>
<template v-for="name in program_names">
  <input type="text" :value="selectedLanguages.indexOf(name.value) >= 0 ? name.text : ''">
</template>
<hr><hr>

<span>Checked program_names: {{ selectedLanguages | json }}</span>
  
</body>
</html>

index.js

new Vue({
  el: 'body',
  data: {
    program_names: [
      {value: 'Laravel', text: 'Laravel'},
      {value: 'Vuejs', text: 'Vuejs'},
      {value: 'Magento', text: 'Magento'},
      {value: 'Angularjs', text: 'Angularjs'},
      {value: 'JSON', text: 'JSON'},
      {value: 'JavaScript', text: 'JavaScript'},
      {value: 'PHP', text: 'PHP'},
      {value: 'HTML', text: 'HTML'}
    ],
    selectedLanguages: []
  }
});

style.css

input[type="text"] {width:53px;}

Full Source Code Example(index.html)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
  <meta name="viewport" content="width=device-width">
  <title>Retrieve Multiple Checkbox Selected Options using VueJS</title>
  <style>
  input[type="text"] {width:53px;}
  </style>
</head>
<body>
<h1>Retrieve Multiple Checkbox Selected Options using VueJS</h1>
<template v-for="name in program_names">
  <input type="checkbox" :id="name.value" :value="name.value" v-model="selectedLanguages">
  <label :for="name.value">{{ name.text }}</label>
  </template>
<hr>

<h2>retrieve my selected option for vuejs</h2>
<template v-for="name in program_names">
  <input type="text" :value="selectedLanguages.indexOf(name.value) >= 0 ? name.text : ''">
</template>
<hr><hr>

<span>Checked program_names: {{ selectedLanguages | json }}</span>
<script>
new Vue({
  el: 'body',
  data: {
    program_names: [
      {value: 'Laravel', text: 'Laravel'},
      {value: 'Vuejs', text: 'Vuejs'},
      {value: 'Magento', text: 'Magento'},
      {value: 'Angularjs', text: 'Angularjs'},
      {value: 'JSON', text: 'JSON'},
      {value: 'JavaScript', text: 'JavaScript'},
      {value: 'PHP', text: 'PHP'},
      {value: 'HTML', text: 'HTML'}
    ],
    selectedLanguages: []
  }
});
</script>  
</body>
</html>

How to get multiple CheckBox checked value in vuejs

Also Read This 👉 Morris.js Dynamic Data Example PHP Mysql

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is vuejs : Retrieve Multiple Checkbox Selected Options And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.