ensure that only one option can be selected with the checkbox

Question

ensure that only one option can be selected with the checkbox

Can someone help me with applying this code on VueJS? I tried replacing onclick with @click but it's not working for me. I'm new to VueJS, so any guidance would be appreciated!

function onlyOne(checkbox) {
    var checkboxes = document.getElementsByName('check')
    checkboxes.forEach((item) => {
        if (item !== checkbox) item.checked = false
    })
}
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">

javascript vue.js vuejs2

Answer 1

Answer №1

Here is a simple solution to the problem at hand:

new Vue({
  el: "#app",
  data() {
    return {
      checkboxes: [{
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
      ]
    }
  },
  methods: {
    onChange(cb) {
      this.checkboxes = this.checkboxes.map(checkbox => ({ checked: cb == checkbox }))
    },
  },
  template: `
    <div>
      <div
        v-for="(checkbox, i) in checkboxes"
        :key="i"
      >
        <input
          type="checkbox"
          :checked="checkbox.checked"
          @change="() => onChange(checkbox)"
        />
        {{ checkbox.checked }}
      </div>
    </div>
  `
})

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

<div id="app"></div>

Answer 2

Here is a simple solution to the problem at hand:

new Vue({
  el: "#app",
  data() {
    return {
      checkboxes: [{
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
      ]
    }
  },
  methods: {
    onChange(cb) {
      this.checkboxes = this.checkboxes.map(checkbox => ({ checked: cb == checkbox }))
    },
  },
  template: `
    <div>
      <div
        v-for="(checkbox, i) in checkboxes"
        :key="i"
      >
        <input
          type="checkbox"
          :checked="checkbox.checked"
          @change="() => onChange(checkbox)"
        />
        {{ checkbox.checked }}
      </div>
    </div>
  `
})

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

<div id="app"></div>

ensure that only one option can be selected with the checkbox

Answer №1

Similar questions

Is it possible to set a read-only attribute using getElementByName method

The Vuejs Fetch GET Request encounters a failure, despite working flawlessly in Postman and the browser, all thanks to a 302 redirection

Having trouble with GSAP CDN not functioning properly in your JavaScript or HTML document?

Displaying JavaScript Array Elements in an Aligned Table Format

Sophisticated filter - Conceal Ancestry

Ensure history.back() does not trigger Confirm Form Resubmission

Should I utilize capacitor's geolocation or opt for capacitor-community's background-location?

swap out a JavaScript function for a fresh function

Updating the background of a button with Vue JS by utilizing an object upon clicking

Transforming JSON date format to a different one using Jackson libraries

Generate interactive tables using data from an XML file

Strange anomalies arising in frontend Apollo and GraphQL integration

Adding an element in real-time to a sortable list item using VueJs

JavaScript - I have a variable trapped inside a function and I'm struggling to retrieve it

What is the method for setting the doctype to HTML in JavaScript or React?

Utilizing multiple language files in Vue with vue-i18n: A comprehensive guide

Loading Bootstrap accordion content with AJAX only when clicked

Incorporating a requirement into a function to ensure it is executed only under certain circumstances

Troubleshooting problems with Bootstrap datepicker in a Vue project