嵌套/分组复选框的正确标记

Question

我正在使用嵌套复选框的界面。我们的想法是，所有“顶级”复选框都会出现，然后一旦选中一个，就会出现子项目，所有其他顶级项目都会消失。

- Checkbox 1
- Checkbox 2

选择复选框2时：

X Checkbox 2

- Checkbox 2.1
- Checkbox 2.2

我可以处理样式和JS，但我真的坚持最好的标记。这就是我现在想的：

<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>

在某些方面，这感觉是使用嵌套fieldset的好时机，但HTML规范明确不鼓励这样做。