Skip to content
Fix Code Error

VueJS Master Checkbox Toggle with array values

April 16, 2021 by Code Error
Posted By: Anonymous

I am using VueJS and am having a problem implementing two features on a series of checkboxes.

  • Firstly, my checkboxes are build dynamically.
  • I need to implement a master ‘toggle’ checkbox which when clicked either checks or un-checks all other checkboxes.
  • I need to keep an array of checked items in the model.

This script gives me the toggle checkbox, but does not populate the “checkedNames” array. I have tried adding a v-model to the names checkboxes but that just checked everything and still doesn’t populate the array.

_x000D_

_x000D_

new Vue({_x000D_
  el: '#boxes',_x000D_
  data: {_x000D_
    checked: null,_x000D_
    checkedNames: [],_x000D_
    teams: [{_x000D_
        name: 'team a',_x000D_
        id: 'team-a',_x000D_
        checked: null,_x000D_
        members: [{_x000D_
            'id': 1,_x000D_
            'name': 'Dave'_x000D_
          },_x000D_
          {_x000D_
            'id': 2,_x000D_
            'name': 'Dee'_x000D_
          },_x000D_
          {_x000D_
            'id': 3,_x000D_
            'name': 'Dozy'_x000D_
          },_x000D_
          {_x000D_
            'id': 4,_x000D_
            'name': 'Beaky'_x000D_
          },_x000D_
          {_x000D_
            'id': 5,_x000D_
            'name': 'Mick'_x000D_
          },_x000D_
          {_x000D_
            'id': 6,_x000D_
            'name': 'Tich'_x000D_
          }_x000D_
        ]_x000D_
      },_x000D_
      {_x000D_
        name: 'team b',_x000D_
        id: 'team-b',_x000D_
        checked: null,_x000D_
        members: [{_x000D_
            'id': 7,_x000D_
            'name': 'John'_x000D_
          },_x000D_
          {_x000D_
            'id': 8,_x000D_
            'name': 'Paul'_x000D_
          },_x000D_
          {_x000D_
            'id': 9,_x000D_
            'name': 'George'_x000D_
          },_x000D_
          {_x000D_
            'id': 10,_x000D_
            'name': 'Ringo'_x000D_
          }_x000D_
        ]_x000D_
      }_x000D_
    ]_x000D_
  }_x000D_
});

_x000D_

<div id='boxes'>_x000D_
  <ul>_x000D_
    <li v-for="team in teams" style="width: 100px; float:left">_x000D_
      <div>_x000D_
        <input type="checkbox" class="form-check form-check-inline" v-bind:id="team.id" v-model="team.checked">_x000D_
        <label v-bind:for="team.id"><strong>{{ team.name }}</strong></label>_x000D_
      </div>_x000D_
      <ul class="countries_list">_x000D_
        <li v-for="member in team.members">_x000D_
          <input type="checkbox" class="form-check form-check-inline" v-bind:id="member.id" v-bind.checked="{checked : team.checked}">_x000D_
          <label v-bind:for="member.id">{{ member.name }}</label>_x000D_
        </li>_x000D_
      </ul>_x000D_
    </li>_x000D_
  </ul>_x000D_
  <br>_x000D_
  <span>Checked names: {{ checkedNames }}</span>_x000D_
</div>_x000D_
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

_x000D_

_x000D_

_x000D_

https://jsfiddle.net/50wL7mdz/133578/

Is anyone able to point me in the right direction?

Solution

This is a bit tricky. I think you need to control everything using @change as you have your checkAll checkboxes feature.

In my side, I don’t need those parent checked properties, all I need is the children checked property to distinguised either checked/unchecked. Basically this is a fallback as you have to add extra property checked.

Check and try to run the snippet below.

_x000D_

_x000D_

new Vue({_x000D_
        el : '#boxes',_x000D_
        data : {_x000D_
            teams: [_x000D_
                {_x000D_
                    name: 'team a',_x000D_
                    id: 'team-a',_x000D_
                    members: [_x000D_
                        {'id': 1, 'name' : 'Dave', 'checked': false},_x000D_
                        {'id': 2, 'name' : 'Dee', 'checked': false},_x000D_
                        {'id': 3, 'name' : 'Dozy', 'checked': false},_x000D_
                        {'id': 4, 'name' : 'Beaky', 'checked': true},_x000D_
                        {'id': 5, 'name' : 'Mick', 'checked': false},_x000D_
                        {'id': 6, 'name' : 'Tich', 'checked': false}_x000D_
                    ]_x000D_
                },_x000D_
                {_x000D_
                    name: 'team b',_x000D_
                    id: 'team-b',_x000D_
                    members: [_x000D_
                        {'id': 7, 'name' : 'John', 'checked': false},_x000D_
                        {'id': 8, 'name' : 'Paul', 'checked': false},_x000D_
                        {'id': 9, 'name' : 'George', 'checked': false},_x000D_
                        {'id': 10, 'name' : 'Ringo', 'checked': false},_x000D_
                        {'id': 11, 'name' : 'Mick', 'checked': false}_x000D_
                    ]_x000D_
                }_x000D_
            ]_x000D_
        },_x000D_
        computed: {_x000D_
          getSelectedMembers: function() {_x000D_
            var selectedMem = [];_x000D_
            for(var teamIdx in this.teams) {_x000D_
              var members = this.teams[teamIdx].members;_x000D_
              for(var memberIdx in members) {_x000D_
                if (members[memberIdx].checked) {_x000D_
                  selectedMem.push(members[memberIdx].id);_x000D_
                }_x000D_
              }_x000D_
            }_x000D_
            return selectedMem;_x000D_
          }_x000D_
        },_x000D_
        methods: {_x000D_
          checkAll: function(idx, $event) {_x000D_
            var member = this.teams[idx].members;_x000D_
            for(var memberIdx in member) {_x000D_
              member[memberIdx].checked = $event.target.checked;_x000D_
            }_x000D_
          }_x000D_
        }_x000D_
    });

_x000D_

.disp {_x000D_
  display: inline-block;_x000D_
}

_x000D_

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>_x000D_
<script src="https://unpkg.com/vue"></script>_x000D_
_x000D_
<div id='boxes'>_x000D_
    <ul>_x000D_
        <li v-for="(team, index) in teams" style="width: 200px; float:left">_x000D_
            <div>_x000D_
                <input type="checkbox" class="form-check form-check-inline" v-bind:id="team.id" @change="checkAll(index, $event)" >_x000D_
                <label v-bind:for="team.id"><strong>{{ team.name }}</strong></label>_x000D_
            </div>_x000D_
            <ul class="countries_list">_x000D_
                <li v-for="member in team.members">_x000D_
                    <input type="checkbox" class="form-check form-check-inline" v-bind:id="member.id" v-bind.checked="{checked : member.checked}" :value="member.name" @change="member.checked = !member.checked">_x000D_
                    <label v-bind:for="member.id">{{ member.name }}</label>_x000D_
                </li>_x000D_
            </ul>_x000D_
        </li>_x000D_
    </ul>_x000D_
    <div>getSelectedMembers: {{ getSelectedMembers }}</div>_x000D_
    <br><br><br><br><br><br><br><br><br>_x000D_
    <div class="disp" v-for="team in teams">_x000D_
      <ul><strong>{{ team.id }}</strong>_x000D_
        <li v-for="member in team.members" v-if="member.checked">{{member.name}}</li>_x000D_
      </ul>_x000D_
    </div>_x000D_
    _x000D_
</div>

_x000D_

_x000D_

_x000D_

Answered By: Anonymous

Related Articles

  • Is CSS Turing complete?
  • How do i update a javascript variable as its value changes?
  • Uncheck CheckBox with its label in VueJS
  • How to prevent scrolling the whole page?
  • VueJS masonry layout
  • DataTable draw daterange from vaadin-date-picker in polymer
  • How do I include certain conditions in SQL Count
  • Ember 2, filter relationship models (hasMany, belongsTo) and…
  • Vuex dynamic checkboxes binding
  • VueJS: Getting values from multiple checkbox binding in…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Call mutation before every action Vuex

Next Post:

debug Aurelia ViewModel similar to ko.toJson

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error