<ul id="nested-checkboxes" class="input-group input-group__parent nested-checkboxes ">
<li>
<label class="label--checkbox" for="parent-item-1-(initially-unchecked)"><input id="parent-item-1-(initially-unchecked)" type="checkbox" name="parent-item-1-(initially-unchecked)" value="parent-item-1-(initially-unchecked)" />Parent item 1 (initially unchecked)</label>
<ul class="input-group input-group__descendant">
<li><label class="label--checkbox" for="sub-item-1"><input id="sub-item-1" type="checkbox" name="sub-item-1" value="sub-item-1" />Sub item 1</label>
</li>
<li><label class="label--checkbox" for="sub-item-2"><input id="sub-item-2" type="checkbox" name="sub-item-2" value="sub-item-2" />Sub item 2</label>
</li>
<li><label class="label--checkbox" for="sub-item-3"><input id="sub-item-3" type="checkbox" name="sub-item-3" value="sub-item-3" />Sub item 3</label>
</li>
</ul>
</li>
<li>
<label class="label--checkbox" for="parent-item-2-(initially-mixed)"><input id="parent-item-2-(initially-mixed)" type="checkbox" name="parent-item-2-(initially-mixed)" value="parent-item-2-(initially-mixed)" />Parent item 2 (initially mixed)</label>
<ul class="input-group input-group__descendant">
<li><label class="label--checkbox" for="sub-item-4"><input id="sub-item-4" type="checkbox" name="sub-item-4" value="sub-item-4" checked />Sub item 4</label>
</li>
<li><label class="label--checkbox" for="sub-item-5"><input id="sub-item-5" type="checkbox" name="sub-item-5" value="sub-item-5" />Sub item 5</label>
</li>
<li><label class="label--checkbox" for="sub-item-6"><input id="sub-item-6" type="checkbox" name="sub-item-6" value="sub-item-6" checked />Sub item 6</label>
</li>
</ul>
</li>
<li>
<label class="label--checkbox" for="parent-item-3-(initially-all-checked)"><input id="parent-item-3-(initially-all-checked)" type="checkbox" name="parent-item-3-(initially-all-checked)" value="parent-item-3-(initially-all-checked)" />Parent item 3 (initially all checked)</label>
<ul class="input-group input-group__descendant">
<li><label class="label--checkbox" for="sub-item-7"><input id="sub-item-7" type="checkbox" name="sub-item-7" value="sub-item-7" checked />Sub item 7</label>
</li>
<li><label class="label--checkbox" for="sub-item-8"><input id="sub-item-8" type="checkbox" name="sub-item-8" value="sub-item-8" checked />Sub item 8</label>
</li>
<li><label class="label--checkbox" for="sub-item-9"><input id="sub-item-9" type="checkbox" name="sub-item-9" value="sub-item-9" checked />Sub item 9</label>
</li>
</ul>
</li>
</ul>
<ul id="{{ label | slugify }}" class="input-group input-group__parent {{ label | slugify }} {% if inverse %} input-group--inverse{% endif %}">
{% for item in items %}
<li>
{% if item.children %}
{% render '@checkbox', {label: item.label, value: item.label | slugify, name: item.label | slugify, standAlone: false}, true %}
<ul class="input-group input-group__descendant{% if inverse %} input-group--inverse{% endif %}{% if modifiers %}{% for modifier in modifiers %} input-group--{{ modifier }}{% endfor %}{% endif %}">
{% for child in item.children %}
<li>{% render '@checkbox', {label: child.label, value: child.label | slugify, name: child.label | slugify, checked: child.checked, standAlone: false}, true %}</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{
"label": "Nested Checkboxes",
"items": [
{
"label": "Parent item 1 (initially unchecked)",
"children": [
{
"label": "Sub item 1"
},
{
"label": "Sub item 2"
},
{
"label": "Sub item 3"
}
]
},
{
"label": "Parent item 2 (initially mixed)",
"children": [
{
"label": "Sub item 4",
"checked": true
},
{
"label": "Sub item 5"
},
{
"label": "Sub item 6",
"checked": true
}
]
},
{
"label": "Parent item 3 (initially all checked)",
"children": [
{
"label": "Sub item 7",
"checked": true
},
{
"label": "Sub item 8",
"checked": true
},
{
"label": "Sub item 9",
"checked": true
}
]
}
]
}
There are no notes for this item.