Vue JS One Checkbox unchecking another

Question

I am trying to get one checkbox to uncheck another (kinda like radio buttons). I am a little bit of a Vue noob so I am not sure what I am doing wrong. Here are the two inputs.

<label for="'product-'+product.id"
     class="none addon_label"
     :class="{'addon_selected': !selected}"
     >

<input class=""
       type="checkbox" 
       :id="'product-'+product.id"
       :value="false"
       v-model="selected"/>

<div class="v-center">None</div>
</label>

<label :for="'product-'+product.id"
     class="is_flex addon_label"
     :class="{'addon_selected': selected}"
     :data-product-id="product.id">
<div class="checkbox-container">
<input class=""
       type="checkbox"
       :value="true"
       :id="'product-'+product.id"
       v-model="selected"/>
</div>

Recording of the problem

Both labels and inputs have the same for/id (product-'+product.id), and will thus behave like this. What are you trying to achieve? — tauzN
– tauzN, Commented Apr 21, 2022 at 16:35

Nikola Pavicevic · Accepted Answer · 2022-04-21 16:30:54Z

You can use radio buttons instead of checkbox:

new Vue({
  el: "#demo",
  data() {
    return {
      product: {id: 1},
      selected: false
    }
  }
})

.addon_selected {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <label for="'product-'+product.id"
       class="none addon_label"
       :class="{'addon_selected': !selected}"
       >
  <input class=""
         type="radio" 
         :id="'product-'+product.id"
         :value="false"
         v-model="selected"/>
  </label>
  <label :for="'product-'+product.id"
       class="is_flex addon_label"
       :class="{'addon_selected': selected}"
       :data-product-id="product.id">
  <input class=""
         type="radio"
         :value="true"
         :id="'product-'+product.id"
         v-model="selected"/>
         
  </label>
</div>

Andres Foronda · Accepted Answer · 2022-04-21 18:24:57Z

Well, I think that using two variables will be a good approach to have this behavior (checkbox like radio buttons).

There are two methods setInitial and setEnd, each one clear the another input, but the checkbox behavior still the same, so you can clear or reset the inputs by clicking the same input twice.

new Vue({
el: "#app",
data: {
  initial: false,
  end: false
},

methods: {
  setInitial: function(){
    this.end = false
  },
  setEnd: function(){
    this.initial = false
  }
}

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label
    class="none addon_label"
    :class="{'addon_selected': !initial}"
  >Initial</label>
  <input 
    type="checkbox" 
    v-model="initial"
    @click="setInitial"
  />
  ==#==

  <label
    class="is_flex addon_label"
    :class="{'addon_selected': end}"
  >End</label>
  <input
     type="checkbox"
     v-model="end"
     @click="setEnd"
  />
<hr>
Initial {{ initial }} - End {{ end }}
<hr>
  
</div>

Please run the snippet and test this solution

Igor Moraru · Accepted Answer · 2022-04-21 18:25:27Z

1

If you absolutely need to use checkboxes instead of radio inputs, you can reverse the true-value and false-value props of one input. This way it will mimic the behavior of the radio buttons.

new Vue({
el: "#app",
data: {
  selected: false
}
})

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

<div id="app">
<label for="first_input"
     >False</label>
<input
       type="checkbox" 
       id="first_input"
       v-model="selected"
       :true-value="false"
       :false-value="null"/>

<label for="second_input"
     >True</label>
<input
       type="checkbox" 
       id="second_input"
       v-model="selected"
       :false-value="null"/>
       
<br/>
       
Input value: {{ selected }}

</div>

edited Apr 21, 2022 at 18:25

answered Apr 21, 2022 at 16:55

Igor Moraru

7,7491 gold badge15 silver badges28 bronze badges

3 Comments

Andres Foronda Over a year ago

This is really new for me (true-value attribute), but, how to deselect the checkbox? in your solution there is no way to reset the inputs.

Igor Moraru Over a year ago

@AndresForonda I've updated the code. setting the false-value of both inputs to null will allow to deselect the inputs, while keeping model-bindings for the true-value. concerning the input attributes these are Vue specific attributes, and you may want to familiarize with all of them here

Andres Foronda Over a year ago

Great, again this is very clever

DevProgrammer · Accepted Answer · 2022-04-21 16:33:47Z

You can try this.

<label for="'product-'+product.id"
     class="none addon_label"
     :class="{'addon_selected': !selected}"
     >

<input class=""
       type="radio" 
       :id="'product-'+product.id"
       :value="checkStatus"
       @change="check($event.target.value)"/>

<div class="v-center">None</div>
</label>

<label :for="'product-'+product.id"
     class="is_flex addon_label"
     :class="{'addon_selected': selected}"
     :data-product-id="product.id">
<div class="checkbox-container">
<input class=""
       type="radio"
       :value="checkStatus"
       :id="'product-'+product.id"
       @change="check($event.target.value)/>
</div>

In your script of component, you can define method check() inside of methods.

<script>
export default {
    data() {
        return {
            checkStatus: false
        }
    },
    methods: {
        check: function(val) {
              this.checkStatus = !val;
        }
    },
}
</script>

Collectives™ on Stack Overflow

Vue JS One Checkbox unchecking another

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related