javascript - CheckUncheck all checkbox in group Vue.js - Stack Overflow

admin管理员组

文章数量:1414947

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!

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!

• javascript
• checkbox
• vue.js
• vuejs2

Share Improve this question Follow edited Nov 29, 2017 at 15:41 Bert 82.5k1717 gold badges203203 silver badges166166 bronze badges asked Nov 29, 2017 at 14:41 VK Da NINJAVK Da NINJA 52077 silver badges1919 bronze badges 8

• 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 – 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 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 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 Commented Nov 29, 2017 at 15:12
• @samayo I find codepen far nicer to work with than jsfiddle. – Bert Commented Nov 29, 2017 at 15:23

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 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.

本文标签： javascriptCheckUncheck all checkbox in group VuejsStack Overflow