0

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

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

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

4

0 回答 0