Html 复选框的标签 选择列表 主列表 次要列表 全部检查

是否仍要使用

for=…

属性将标签作为目标，或者是否需要分配

id

？

一个

标签一个表单控件。如果要为一组表单控件提供“标签”，请使用带有图例的字段集

<div><label for="group">Select lists</label></div>
<div>
    <input type="checkbox" name="group" id="group1" value="1" title="Main List" />
<label for="group1">Main List</label>
    <input type="checkbox" name="group" id="group2" value="2" title="Secondary List" />
<label for="group2">Secondary List</label>
<label for="group1 group1">Check All</label>
</div>

选择列表
主列表
次要列表

如果您想提供“全部检查”功能，那么您需要使用JavaScript

例如：

<fieldset>
    <legend> Select lists </legend>

    <input type="checkbox" name="group" id="group1" value="1"><label for="group1">Main List</label>
    <input type="checkbox" name="group" id="group2" value="2"><label for="group2">Secondary List</label>
</fieldset>

选择列表
主列表
次要列表
全部检查

及

函数checkAll（）{
var-box=this.parentNode.querySelectorAll（'input[type=checkbox'）；
对于（变量i=0；i

---

（与不支持

querySelector

的旧浏览器的兼容性留给读者作为练习）

什么不适合你？你说的标签是什么意思？标签指的是控件（字段），反之亦然。标签不勾选两个框。是的，您可以。只需将每个输入字段包含在各自的标签标签中即可。示例：

单击此处检查此

<fieldset>
    <legend> Select lists </legend>

    <input type="checkbox" name="group" id="group1" value="1"><label for="group1">Main List</label>
    <input type="checkbox" name="group" id="group2" value="2"><label for="group2">Secondary List</label>
    <input type="checkbox" name="group" id="all" value="all"><label for="all">Check all</label>
</fieldset>

function checkAll() {
    var boxes = this.parentNode.querySelectorAll('input[type=checkbox]');
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].checked = this.checked;
    }
}

document.querySelector('[value="all"]').addEventListener('change', checkAll);