Deselect radio option

Question

Deselect radio option

I am attempting to create a Vue instance with a group of radio buttons. My aim is that when a user clicks on a checked radio button, it will become unchecked. However, I have not been successful in accomplishing this using Vue so far. Below is the code I have written:

HTML:

<div id="app">
    <div v-for="(val, key) in list">
        <input type="radio" name="radio" :value="val" v-model="selected" :id="val">
        <label :for="val" @click="uncheck( val )">{{ val }}</label>
    </div>
    <button @click="uncheckAll">Uncheck all</button>
</div>

JS:

var app = new Vue({
        el: '#app',
        data : {
            list: [ 'one', 'two', 'three' ],
            selected: 'two',
        },
        methods : {
            uncheck: function( val ){
                console.log( val, this.selected );
                if ( val == this.selected ){
                    this.selected = false;
                }
            },
            uncheckAll: function(){
                this.selected = false;
            }
        }
})

It appears that the uncheck method is being called, but then the radio button triggers a change event and updates the value of

selected</code again. The <code>uncheckAll

method works as expected, probably because it does not use v-model.

Do you have any suggestions or tips to make this functionality work? You can view an example of the code on this pen: https://codepen.io/diegoliv/pen/JrPBbG

javascript vue.js

Answer 1

Answer №1

One challenge is that the v-model is altering the value of selected before you have a chance to assess its previous value. An additional variable is needed.

The concept is as follows: when an item is clicked, it verifies if it matches previouslySelected instead of selected. If there is a match, deselect the item. Then update previouslySelected with the value of selected.

The click function should be on the input rather than on the label; since the label's purpose is to redirect clicks to the input anyway.

var app = new Vue({
  el: '#app',
  data: {
    list: ['one', 'two', 'three'],
    selected: 'two',
    previouslySelected: 'two'
  },
  methods: {
    uncheck: function(val) {
      if (val === this.previouslySelected) {
        this.selected = false;
      }
      this.previouslySelected = this.selected;
    },
    uncheckAll: function() {
      this.selected = false;
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-for="(val, key) in list">
    <input type="radio" name="radio" :value="val" v-model="selected" :id="val" @click="uncheck(val)">
    <label :for="val">{{ val }}</label>
  </div>
  <button @click="uncheckAll">Uncheck all</button>
</div>

Note: the method below is not compatible with Vue 2.5 or newer versions because clicking on an already-selected radio does not trigger a set action. (acknowledgements to Vlad T. from the comments)

An alternative approach would be handling things more data-centrically by creating a computed property based on your selected value and having its setter handle the re-selection check. No need for a click handler. Everything is managed during the normal process of setting the value.

var app = new Vue({
  el: '#app',
  data: {
    list: ['one', 'two', 'three'],
    d_selected: 'two'
  },
  computed: {
    selected: {
      get() {
        return this.d_selected;
      },
      set(v) {
        if (v === this.d_selected) {
          this.d_selected = false;
        } else {
          this.d_selected = v;
        }
      }
    }
  },
  methods: {
    uncheckAll: function() {
      this.d_selected = false;
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-for="(val, key) in list">
    <input type="radio" name="radio" :value="val" v-model="selected" :id="val">
    <label :for="val">{{ val }}</label>
  </div>
  <button @click="uncheckAll">Uncheck all</button>
</div>

Answer 2

One challenge is that the v-model is altering the value of selected before you have a chance to assess its previous value. An additional variable is needed.

The concept is as follows: when an item is clicked, it verifies if it matches previouslySelected instead of selected. If there is a match, deselect the item. Then update previouslySelected with the value of selected.

The click function should be on the input rather than on the label; since the label's purpose is to redirect clicks to the input anyway.

var app = new Vue({
  el: '#app',
  data: {
    list: ['one', 'two', 'three'],
    selected: 'two',
    previouslySelected: 'two'
  },
  methods: {
    uncheck: function(val) {
      if (val === this.previouslySelected) {
        this.selected = false;
      }
      this.previouslySelected = this.selected;
    },
    uncheckAll: function() {
      this.selected = false;
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-for="(val, key) in list">
    <input type="radio" name="radio" :value="val" v-model="selected" :id="val" @click="uncheck(val)">
    <label :for="val">{{ val }}</label>
  </div>
  <button @click="uncheckAll">Uncheck all</button>
</div>

Note: the method below is not compatible with Vue 2.5 or newer versions because clicking on an already-selected radio does not trigger a set action. (acknowledgements to Vlad T. from the comments)

An alternative approach would be handling things more data-centrically by creating a computed property based on your selected value and having its setter handle the re-selection check. No need for a click handler. Everything is managed during the normal process of setting the value.

var app = new Vue({
  el: '#app',
  data: {
    list: ['one', 'two', 'three'],
    d_selected: 'two'
  },
  computed: {
    selected: {
      get() {
        return this.d_selected;
      },
      set(v) {
        if (v === this.d_selected) {
          this.d_selected = false;
        } else {
          this.d_selected = v;
        }
      }
    }
  },
  methods: {
    uncheckAll: function() {
      this.d_selected = false;
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-for="(val, key) in list">
    <input type="radio" name="radio" :value="val" v-model="selected" :id="val">
    <label :for="val">{{ val }}</label>
  </div>
  <button @click="uncheckAll">Uncheck all</button>
</div>

Answer 3

Answer №2

Presented here is a straightforward example that does not rely on v-model and simply utilizes one variable to hold the current selected value.

var app = new Vue({
  el: '#app',
  data: {
    list: ['one', 'two', 'three'],
    selected: 'two'
  },
  methods: {
    uncheck: function (val) {
      if (val === this.selected) {
        this.selected = false
      } else {
        this.selected = val
      }
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-for="(val, key) in list">
    <input type="radio" :checked="selected===val" :id="val" @click="uncheck(val)" :key="'input' + key">
    <label :for="val" :key="'label' + key">{{ val }}</label>
  </div>
</div>

Answer 4

Presented here is a straightforward example that does not rely on v-model and simply utilizes one variable to hold the current selected value.

var app = new Vue({
  el: '#app',
  data: {
    list: ['one', 'two', 'three'],
    selected: 'two'
  },
  methods: {
    uncheck: function (val) {
      if (val === this.selected) {
        this.selected = false
      } else {
        this.selected = val
      }
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-for="(val, key) in list">
    <input type="radio" :checked="selected===val" :id="val" @click="uncheck(val)" :key="'input' + key">
    <label :for="val" :key="'label' + key">{{ val }}</label>
  </div>
</div>

Answer 5

Answer №3

To prevent the default behavior of clicking the label, you can utilize the prevent modifier:

<label :for="val" @click.prevent="uncheck( val )">{{ val }}</label>

If you want to see a functioning example, check out this Codepen: Link

Answer 6

To prevent the default behavior of clicking the label, you can utilize the prevent modifier:

<label :for="val" @click.prevent="uncheck( val )">{{ val }}</label>

If you want to see a functioning example, check out this Codepen: Link

Deselect radio option

Answer №1

Answer №2

Answer №3

Similar questions

Dealing with transformed data in AngularJS: Best practices

What is the method for obtaining the input value of an input type number in HTML?

Toggle the visibility of a div by clicking on another div in a

Error encountered while trying to call callback functions

Is there a way to store the JWT response header retrieved with fetch?

Ways to verify audio in several HTML5 video files

Decoding multiple data with jQuery on the server-side

Having trouble with the JQuery class selector?

Implementing Event Listeners in Vue 3.0: A Guide to Attaching to the Parent Element

Issue with dropdown list functionality in Internet Explorer not functioning correctly

Is invalid HTML causing issues with Backbone.js templating in Phonegap?

Activate the textbox without utilizing `.focus()` method

Having trouble resolving '@auth0/nextjs-auth0' during deployment on Vercel? Check out this error message: "Can't resolve '@auth0/nextjs-auth0' in '/vercel/path0/pages'"

Enabling hover effects to scroll divs only when interacted with

Confirming the username's accuracy through an external API as part of the registration procedure

Error in Internet Explorer 8 - the object does not support this property or method

Firestore query failing to retrieve most recent data

Updating a Nested Form to Modify an Object

Error encountered in production mode - TypeError: o is not a function in Vue/webpack/Laravel Mix

What is the significance of the exclamation point before and after in JavaScript?