How to display selected checkbox value in Vuejs?

Question

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

You should not use the same name for two different things, like you are using checkboxestwo which is an array as well as a boolean. — Yash Maheshwari
– Yash Maheshwari, Commented May 16, 2021 at 4:07
checkAlltwo is not needed it is part of other functionality. Yes ur correct I have taken as array and boolean. If possible can you please add some working code where ever there is wrong. — T dhanunjay
– T dhanunjay, Commented May 16, 2021 at 4:18

tuhin47 · Accepted Answer · 2021-05-16 19:05:27Z

1

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>

edited May 16, 2021 at 19:05

answered May 16, 2021 at 6:40

tuhin47

6,2735 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

T dhanunjay Over a year ago

But there is small bug in the above code that is, After clicking the checkbox it is displaying the selected checkbox label but, When i clear using label, checkbox is not unchecking. 2.)After selecting all checkboxes and if i click on clear, checkboxes not unchecking and if i try to uncheck checkboxes manually then after unchecking label is printing the value and second checkbox label not printing.

tuhin47 Over a year ago

Actually, It's better to use v-model.Else Need to handle the cases for this approach. Now I have fixed that. Please check once again

Collectives™ on Stack Overflow

How to display selected checkbox value in Vuejs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related