3 level checkbox

[ethan.david.376]

"Checkbox1
   Checkbox2A
   Checkbox2B
     Checkbox2AA --- hidden at first
     Checkbox2AB --- hidden at first"

How will I implement this using javascript/jquery? When Checkbox1 is checked, Checkbox2A and Checkbox2B will also be checked. When Checkbox2A is checked, Checkbox2AA and Checkbox 2AB will be visible.

[diafol]

Your logic doesn't make sense or does it? Checking chk1 will check everything. Why does 2a check 2aa and 2ab? From the layout it seems that 2b should control them.

[gon1387]

Hi ethan,

Though not the same as your request, you can do it through css alone. Having this kind of html structure:

<div class="checkBox">
    1
    <input type="checkbox" />
    <div>
        1.1
        <input type="checkbox" />
        1.2
        <input type="checkbox" />
        <div>
            1.2.1
            <input type="checkbox" />
        </div>
    </div>
    2
    <input type="checkbox" />
    <div>
        2.1
        <input type="checkbox" />
        2.2
        <input type="checkbox" />
        <div>
            2.2.1
            <input type="checkbox" />
        </div>
    </div>
</div>

And this css rules.

div {
    display: none;
}

.checkBox {
    display: block;
}

input[type*="checkbox"]:checked ~ div:first-of-type {
    display:block;
}

You can implement the same thing as what I think you want without JS.

But if you still want to push through for a JS implementaion. Using the same HTML Structure, use this in your js:

$(function(){
    $("input[type*='checkbox']").on({
        click: function(){
                $(this).next("div").toggle();
        }
    })
});

and this css rule:

div {
    display: none;
}

.checkBox {
    display: block;
}

You can also see my sample in these fiddles below:

CSS IMPLEMENTATION: CSS Sample
jQuery IMPLEMENTATION: jQuery Sample