How could I do a checked event in jQuery? I have this structure:
With the code it would be:
<ul>
<li class="padre_menu">
<div class="checkbox">
<label>
<input name="padre[]" type="checkbox" class="ace ace-checkbox-2" id="id_padre" value="1">
<span class="lbl"> Inicio</span>
</label>
</div>
</li>
<li class="padre_menu">
<div class="checkbox">
<label>
<input name="padre[]" type="checkbox" class="ace ace-checkbox-2" id="id_padre" value="2">
<span class="lbl"> Mail</span>
</label>
</div>
<ul>
<li class="hijo_menu">
<div class="checkbox">
<label>
<input name="hijo[]" type="checkbox" id="id_hijo" class="ace" value="5">
<span class="lbl"> Sub Mail</span>
</label>
</div>
</li>
<li class="hijo_menu">
<div class="checkbox">
<label>
<input name="hijo[]" type="checkbox" id="id_hijo" class="ace" value="6">
<span class="lbl"> test1</span>
</label>
</div>
</li>
</ul>
</li>
</ul>
What I need is that when I select "Sub Mail" or "test1" I also select the "Mail", or if I mark only "Mail", I select the 2 items that it brings.
This jQuery based solution consists of:
<li>
, then find the next<ul>
one containing the respective children, and apply the same effect (check/uncheck) to the checkbox elements.<ul>
"children" container and see if there are at least some "children" checkboxes selected or not. If there is one selected, we do nothing and the "father" checkbox remains selected, otherwise we remove the " father" checkbox.The following example complies with recursion, something necessary when working with nests