[Vuejs]-How to clear checkbox checked status? with vue

by

0👍

It looks like you have four sections to a form and want the user to select one option from each form. If so, consider having a field selected_option or something similar and use v-model:

new Vue({
  el: "#app",
  data: {
    id:0, 
    items: [
    {'id':1,'name':'chk-a','options':['a1','b1','c1','d1'], 'selected_option': ''},
    {'id':2,'name':'chk-b','options':['a2','b2','c2','d2'], 'selected_option': 'c2'},
    {'id':3,'name':'chk-c','options':['a3','b3','c3','d3'], 'selected_option': ''},
    {'id':4,'name':'chk-d','options':['a4','b4','c4','d4'], 'selected_option': ''},
    ]
  },
  methods: {
    next: function (id) {
      if(id<this.items.length){
        this.id++ 
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <h1>Checkbox</h1>
  <div v-for="item in items[id].options">
    <input type="radio" :name="items[id].name" :id="id" v-model="items[id].selected_option" :value="item">
    <label for="two">{{item}}</label>
  </div>
  <button @click="next(id+1)">Next</button>
</div>

Note that the above has 'c2' automatically selected in the second section. This is to show you an example of default values for v-model using checkboxes and to show you what the expected data will look like. Retrieving these values later can be done easily by iterating through items and pulling out your corresponding selected_option values.

Likewise, you can remove the checked status by simply setting the value to '' for any given selected_option field.

Leave a comment