0

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.

mrwweb
  • 1,344
  • 2
  • 12
  • 22
  • I'm not certain, but I believe this type of question should be posted on http://codereview.stackexchange.com/ vs SO. – Steve Seeger Jan 15 '16 at 03:51
  • @thril Seems a bit too *hypothetical* for Code Review. See [a guide to Code Review for Stack Overflow users](http://meta.codereview.stackexchange.com/q/5777/23788) on Meta.CR :-) – Mathieu Guindon Jan 15 '16 at 03:58
  • Since it's pseudo-code (I'd wish the real html I have to deal with on no one), this doesn't seem like a great question for SO or CR :( any ideas of how to improve it? One of my bigger questions is about the nested fieldsets. Maybe that's more in scope? – mrwweb Jan 15 '16 at 14:31

0 Answers0