Vue JS: Toggling Checkbox Selections

Question

Vue JS: Toggling Checkbox Selections

I'm attempting to create a functionality where checking one checkbox will uncheck another, similar to how radio buttons work. I'm relatively new to Vue.js, so I may be missing something in my code. Here are the two input elements:

<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 demonstrating the issue

javascript vue.js vuejs2

Answer 1

Answer №1

Consider using radio buttons in place of checkboxes:

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>

Answer 2

Consider using radio buttons in place of checkboxes:

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>

Answer 3

Answer №2

In my opinion, utilizing two variables would be an effective approach to achieve the desired behavior similar to checkboxes but with radio button characteristics.

There are two functions called setInitial and setEnd, where each function clears the other input. Surprisingly, the checkbox behavior remains unchanged, allowing users to clear or reset inputs by double-clicking on the same input.

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>

I encourage you to run the snippet provided and test out this solution for yourself.

Answer 4

In my opinion, utilizing two variables would be an effective approach to achieve the desired behavior similar to checkboxes but with radio button characteristics.

There are two functions called setInitial and setEnd, where each function clears the other input. Surprisingly, the checkbox behavior remains unchanged, allowing users to clear or reset inputs by double-clicking on the same input.

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>

I encourage you to run the snippet provided and test out this solution for yourself.

Answer 5

Answer №3

If you find yourself in a situation where checkboxes are necessary instead of radio buttons, one trick is to switch the true-value and false-value props of one checkbox. This will make it behave like a radio button.

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>

Answer 6

If you find yourself in a situation where checkboxes are necessary instead of radio buttons, one trick is to switch the true-value and false-value props of one checkbox. This will make it behave like a radio button.

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>

Answer 7

Answer №4

Feel free to give this a shot.

<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 the component script, you are able to create the check() method within the methods section.

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

Answer 8

Feel free to give this a shot.

<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 the component script, you are able to create the check() method within the methods section.

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

Vue JS: Toggling Checkbox Selections

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a canvas with multiple label introductions can be achieved by following these

What is the best way to transfer information between two separate Javascript controller files?

Using Node and Express to handle form submissions, we can create a POST request that sends data to the server

Using 'interface' declarations from TypeScript is unsupported in JS for React Native testing purposes

"Looking to trigger a server click using JQuery or Javascript in your code? Here's how you can

Display only the relevant search results using ng-show in AngularJS

Error encountered: Uncaught SyntaxError - An unexpected token '<' was found while matching all routes within the Next.js middleware

What is the best way to execute 2 statements concurrently in Angular 7?

Is there a way to retrieve files stored on my hard drive within a webpage?

What is the best way to link a mutable object with an immutable reactive object?

Generating input fields dynamically in a list and extracting text from them: A step-by-step guide

Exploring innerHTML in JavaScript for event listening

Update the URL and parse the data in a Backbone collection

How to retrieve FormData data using Axios

Trigger an action when the input text is changed, specifically when the input is populated from a different source

Error: Cannot access properties that are undefined (specifically '$store')

Is it possible to programmatically open the Firefox browser console using JavaScript within an extension?

Make the card change to gray when clicked using Bootstrap

Using Django's template tag in conjunction with Vuetify's input value: a comprehensive guide

Strip the CSS styling from an image (the CSS being included in the generated code)