checked checkbox dont check with qubit

[laravel-blog]

Hy,

I've the following tree in my html5 file:

<ol id="category-tree-6ae0e08870c828c521d570a829f47244" data-name="categories[]"
                                class="bonsai">
                                <li>
                                    <input type="checkbox" name="categories[]" value="6ae0e08870c828c521d570a829f47244"
                                           id="category-checkbox-6ae0e08870c828c521d570a829f47244" checked>

                                    <label for="category-checkbox-6ae0e08870c828c521d570a829f47244">Komfort</label>
                                    <ol>
                                        <li>
                                            <input type="checkbox" name="categories[]"
                                                   value="592641f715f4122453e3c7f8ee39e9ea"
                                                   id="category-checkbox-592641f715f4122453e3c7f8ee39e9ea" checked>

                                            <label for="category-checkbox-592641f715f4122453e3c7f8ee39e9ea">Komfortprodukte</label>
                                            <ol>
                                                <li>

                                                    <input type="checkbox" name="categories[]"
                                                           value="1de9ad690fcd06b744111ac8745af26a"
                                                           id="category-checkbox-1de9ad690fcd06b744111ac8745af26a">

                                                    <label for="category-checkbox-1de9ad690fcd06b744111ac8745af26a">Sonnenblenden</label>
                                                </li>
                                                <li>

                                                    <input type="checkbox" name="categories[]"
                                                           value="baf2b5572a7b023e943f62d9f3ba5820"
                                                           id="category-checkbox-baf2b5572a7b023e943f62d9f3ba5820">

                                                    <label for="category-checkbox-baf2b5572a7b023e943f62d9f3ba5820">Park-Pilot-System</label>
                                                </li>
                                                <li>

                                                    <input type="checkbox" name="categories[]"
                                                           value="a1e347357eded796390b32270b4e0103"
                                                           id="category-checkbox-a1e347357eded796390b32270b4e0103">

                                                    <label for="category-checkbox-a1e347357eded796390b32270b4e0103">Fernbedienung
                                                        f&uuml;r Standheizung</label>
                                                </li>
                                                <li>

                                                    <input type="checkbox" name="categories[]"
                                                           value="81d6f8b94dcea9a7de7e07782d7c7f62"
                                                           id="category-checkbox-81d6f8b94dcea9a7de7e07782d7c7f62">

                                                    <label for="category-checkbox-81d6f8b94dcea9a7de7e07782d7c7f62">Windabweiser</label>
                                                </li>
                                                <li>

                                                    <input type="checkbox" name="categories[]"
                                                           value="76a6d9240e0b9e6851694afa5d604664"
                                                           id="category-checkbox-76a6d9240e0b9e6851694afa5d604664">

                                                    <label for="category-checkbox-76a6d9240e0b9e6851694afa5d604664">Standheizung</label>
                                                </li>
                                                <li>

                                                    <input type="checkbox" name="categories[]"
                                                           value="7648ab8317268b42419111ee35db86df"
                                                           id="category-checkbox-7648ab8317268b42419111ee35db86df">

                                                    <label for="category-checkbox-7648ab8317268b42419111ee35db86df">LED
                                                        Zusatzlicht f&uuml;r Fahrzeuginnenraum</label>
                                                </li>
                                                <li>

                                                    <input type="checkbox" name="categories[]"
                                                           value="71a670233ee019b7e81ce4200fb6bad2"
                                                           id="category-checkbox-71a670233ee019b7e81ce4200fb6bad2">

                                                    <label for="category-checkbox-71a670233ee019b7e81ce4200fb6bad2">R&uuml;ckfahrwarner</label>
                                                </li>
                                                <li>

                                                    <input type="checkbox" name="categories[]"
                                                           value="237a4f7ed538a5dfe52b7b19eab46556"
                                                           id="category-checkbox-237a4f7ed538a5dfe52b7b19eab46556">

                                                    <label for="category-checkbox-237a4f7ed538a5dfe52b7b19eab46556">K&uuml;hlbox</label>
                                                </li>
                                                <li>

                                                    <input type="checkbox" name="categories[]"
                                                           value="1ed4fcc23e426ed064fc6e51cf0ff663"
                                                           id="category-checkbox-1ed4fcc23e426ed064fc6e51cf0ff663">

                                                    <label for="category-checkbox-1ed4fcc23e426ed064fc6e51cf0ff663">Raucher-Paket</label>
                                                </li>
                                                <li>

                                                    <input type="checkbox" name="categories[]"
                                                           value="cf9fdedd0a5489864e4182063fa8715c"
                                                           id="category-checkbox-cf9fdedd0a5489864e4182063fa8715c">

                                                    <label for="category-checkbox-cf9fdedd0a5489864e4182063fa8715c">Wechselrichter</label>
                                                </li>
                                            </ol>
                                        </li>
                                    </ol>
                                </li>
                            </ol>

You can see the checkboxes with value: 6ae0e08870c828c521d570a829f47244 and 592641f715f4122453e3c7f8ee39e9ea are checked. But after your plugin is ready, the checkbox isnt checked in the browser.

bonsai will initialized with this:

$(document).ready(function(){

                        ...

                        $('#category-tree-6ae0e08870c828c521d570a829f47244').bonsai({
                            expandAll: false,
                            checkboxes: true, // depends on jquery.qubit plugin
                        });
...
                                });

Any ideas, why the checkboxes are unchecked after your plugin is running?

kind regards

[simonexmachina]

AFAICT that should work. If you can post a JSBin showing the problem I'm sure I can work out what's going wrong.

[qintaohao123]

hi, how can I get all leaf item which is checked when the check state is change

[simonexmachina]

var list = $('#my-list');
list.on('change', 'input', function() {
  var checked = list.find('input:checked');
});

[BroCart]

AFAICT that should work. If you can post a JSBin showing the problem I'm sure I can work out what's going wrong.

here is demo of BUG (some parent checkbox is checked): https://lesavita.com/test.html proof: http://joxi.ru/Vm6XvXjijEwWzA.png

[simonexmachina]

That's not what I see when I perform that test on Chrome.

[BroCart]

That's not what I see when I perform that test on Chrome.

safari: http://joxi.ru/E2pwVw7Fa1OxPm.png mozzila: http://joxi.ru/D2PZ4ZNCkxj6Dr.png opera: http://joxi.ru/EA4O9O0uO9PKx2.png What proof do you need to understand the problem? at the first boot (document.load) all checkboxes are correctly entered, but after initialization jquery-bonsai they are displayed incorrectly

[simonexmachina]

I see what's happening. A parent is only checked if all of its children are checked. For example, par-45 becomes unchecked because none of its children are checked.

[BroCart]

Sorry, you're right about the child branch.