CODEWITHSUNDEEP
javascriptvue.js
T dhanunjay
T dhanunjay

Reputation: 820

How to display selected checkbox value in Vuejs?

Reference link https://jsfiddle.net/8xom729c/

<div class="checkbox-alignment-form-filter">
  <input type="checkbox" id="HR 3502 : 2004" class="vh-product" value="HR 3502 : 2004" v-model="checkboxestwo[0]" v-on:click="checkAlltwo()" />
  <label class="productlist-specific" for="HR 3502 : 2004">HR 3502 : 2004</label
                >
              </div>
              <div class="checkbox-alignment-form-filter7">
                <input
                  type="checkbox"
                  id="E250A2"
                  class="vh-product"
                   v-model="checkboxestwo[1]"
                  value="E250A"
                />
                <label class="productlist-specific" for="E250A2">E250A</label>
</div>

How to print selected checkbox value, I mean like when i click on any checkbox value, I need to display the selected value.

Is there any alternative way of doing it in vuejs.

Can anyone please give some inputs. Thanks

Upvotes: 0

Views: 820

Answers (1)

tuhin47
tuhin47

Reputation: 6068

In spite of being usingv-model you can use click event as the code below @click="checkedInput. But the elegant solution is using v-model.If you need additional filtering before selecting a checkbox. You can use this type of click event

let vue = new Vue({
  el: '#app',
  data: {
    checkedNames: [],
    checkedName: true,
    close: false
  },
  methods: {
    uncheck: function(checkedName) {
      this.checkedNames = this.checkedNames.filter(name => name !== checkedName);
      this.$refs[checkedName.toLowerCase()].checked = false
    },
    uncheckall: function(event) {
      this.checkedNames.forEach(e => this.$refs[e.toLowerCase()].checked = false)
      this.checkedNames = [];
    },
    mouseOver: function() {
      this.close = true;

    },
    mouseOut: function() {
      this.close = false;
    },
    checkedInput(event) {
      if (this.checkedNames.includes(event.target.value)) {
        this.uncheck(event.target.value)
      } else {
        this.checkedNames.push(event.target.value)
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div id='app'>
  <ul class="checkboxes">
    <li><input type="checkbox" ref="jack" value="Jack" @click="checkedInput">
      <label for="jack">Jack</label></li>

    <li><input type="checkbox" ref="john" value="John" @click="checkedInput">
      <label for="john">John</label></li>

    <li><input type="checkbox" ref="mike" value="Mike" @click="checkedInput">
      <label for="mike">Mike</label></li>
  </ul>
  <br/>
  <ul class="tags">
    <li @mouseover="mouseOver" @mouseleave="mouseOut" @click="uncheck(checkedName)" class="badge badge-pill badge-primary" v-for="checkedName in checkedNames">
      {{ checkedName }}<span v-show="close" aria-hidden="true">&times;</span>
    </li>
    <li class="badge badge-pill badge-danger" @mouseover="mouseOver" @mouseleave="mouseOut" @click="uncheckall" v-show="checkedNames != ''">Clear</li>
  </ul>
</div>

Upvotes: 1

Related Questions