Check/Uncheck all checkbox in group Vue.js

Question

I have an Array of checkbox which already divided in to groups and I need to check all child checkbox if parent is checked and uncheck if parent is uncheck and then update all their state in Array. This wayyy over my head since I'm realy new to Vue.

I setup a Codepen here, and I can't change Array's structure since it's a JSON response from server.

Js

let tree = [
    {
        "text": "AccountController",
        "id": 1,
        "state": {
            "opened": false,
            "selected": true,
            "disabled": false
        },
        "children": [
            {
                "text": "Index",
                "id": 2,
                "state": {
                    "opened": false,
                    "selected": true,
                    "disabled": false
                },
                "children": null
            },
            {
                "text": "Login",
                "id": 3,
                "state": {
                    "opened": false,
                    "selected": true,
                    "disabled": false
                },
                "children": null
            },
      ...
        ]
    },
    {
        "text": "BaseController",
        "id": 19,
        "state": {
            "opened": false,
            "selected": true,
            "disabled": false
        },
        "children": [
            {
                "text": "GetErrorListFromModelState",
                "id": 20,
                "state": {
                    "opened": false,
                    "selected": true,
                    "disabled": false
                },
                "children": null
            },
            {
                "text": "GetErrorFromModelState",
                "id": 21,
                "state": {
                    "opened": false,
                    "selected": true,
                    "disabled": false
                },
                "children": null
            },
      ...
        ]
    }
]
let app = new Vue({
    el : '#clone',
    data : {
        items : tree,

    },
    methods : {
        submitForm() {
            console.log(tree);
        }
    }
});

Html

<div id="clone">
    <button @click="submitForm">click</button>
    <div class="dd">
        <ol class="dd-list">
            <li v-for="(item, index) in items" 
                v-bind:class="[item.state.opened ? 'dd-item open' : 'dd-item']">
                <div class="dd-handle"
                     @click="item.state.opened = !item.state.opened">
                    <input type="checkbox"
                           :disabled="item.state.disabled" 
                           :name="item.text" 
                           :checked="item.state.selected" 
                           @click="item.state.selected = !item.state.selected">
                    <label :for="item.text">{{item.text}}</label>
                </div>

                <ol v-if="item.children.length != 0" class="dd-list">
                    <li v-for="(children, index) in item.children" 
                        :data-id="children.id" class="dd-item">
                        <div class="dd-handle">
                            <input type="checkbox" 
                                   :name="children.text" 
                                   :checked="children.state.selected" 
                                   :disabled="children.state.disabled" 
                                   @click="children.state.selected = !children.state.selected">
                            <label :for="children.text">{{children.text}}</label>
                        </div>
                    </li>
                </ol>
            </li>
        </ol>
    </div>
</div>

Can someone enlighten me please. Thank in advance!

This is easy to do, you just need to add parent/ child props to the parent and childrens and it would be better next time to post it in jsfiddle.net — samayo
– samayo, Commented Nov 29, 2017 at 14:46
I already setup a Codepen here and I can't change the array structure. — VK Da NINJA
– VK Da NINJA, Commented Nov 29, 2017 at 14:49
It's pretty simple even if you can't change the array structure. Just add an event handler like click and pass down an event & index to it @click='clicked($event ,index)' and from that index you can iterate through the array and check/uncheck the fields .. — samayo
– samayo, Commented Nov 29, 2017 at 15:12
Also make sure to use jsfiddle next time, it's a lot better than codepen to try/modify some of this stuff — samayo
– samayo, Commented Nov 29, 2017 at 15:12
@samayo I find codepen far nicer to work with than jsfiddle. — Bert
– Bert, Commented Nov 29, 2017 at 15:23

Bert · Accepted Answer · 2017-11-29 16:00:15Z

3

In the template,

<input type="checkbox"
       :disabled="item.state.disabled" 
       :name="item.text" 
       :checked="item.state.selected" 
       @click="item.state.selected = !item.state.selected"
       @change="onChange(item, item.state.selected)">

And add the method,

methods : {
    submitForm() {
        console.log(tree);
    },
    onChange(item, state){
        for(let child of item.children){
            child.state.selected = state
        }
    }
}

Updated pen.

edited Nov 29, 2017 at 16:00

answered Nov 29, 2017 at 15:35

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Check/Uncheck all checkbox in group Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related