CODEWITHSUNDEEP
htmlcheckboxnested-checkboxes
mrwweb
mrwweb

Reputation: 1424

Correct Markup for Nested/Grouped Checkbox

I'm working on an interface with nested checkboxes. The idea is that all "top-level" checkboxes appear and then once one is selected, it's sub-items appear and all other top-level ones disappear.

- Checkbox 1
- Checkbox 2

When you select Checkbox 2:

X Checkbox 2

- Checkbox 2.1
- Checkbox 2.2

I can handle the styling and JS but I'm really stuck on the best markup. Here's what I'm thinking right now:

<fieldset>
    <legend>My Checkboxes</legend>
    <ul>
        <li>
            <input type="checkbox" name="my-checkboxes" id="checkbox1"><label for="checkbox1">Checkbox #1</label>
            <ul class="subfields">
                <li>
                    <input type="checkbox" name="my-checkboxes" id="checkbox1.1"><label for="checkbox1-1">Checkbox #1.1</label>
                </li>
                <li>
                    <input type="checkbox" name="my-checkboxes" id="checkbox1.2"><label for="checkbox1-2">Checkbox #1.2</label>
                </li>
            </ul>
        </li>
        <li>
            <input type="checkbox" name="my-checkboxes" id="checkbox2"><label for="checkbox2">Checkbox #2</label>
            <ul class="subfields">
                <li>
                    <input type="checkbox" name="my-checkboxes" id="checkbox2.1"><label for="checkbox2-1">Checkbox #2.1</label>
                </li>
                <li>
                    <input type="checkbox" name="my-checkboxes" id="checkbox2.2"><label for="checkbox2-2">Checkbox #2.2</label>
                </li>
            </ul>
        </li>
    </ul>
</fieldset>

In some ways, this feels like a good time to use nested fieldsets, but the HTML spec explicitly discourages that.

Upvotes: 0

Views: 153

Answers (0)

Related Questions