複選框標籤

Question

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

是否有目標標籤的「for」屬性或我需要分配一個「id」？

Answer 1

A <label>標籤a 單個表單控件。如果您想爲一組表單控件提供「標籤」，請使用帶有圖例的字段集。

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

如果您想提供「全部檢查」功能，那麼您需要使用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> 
    <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); 

（與不支持querySelector舊的瀏覽器兼容性作爲練習留給讀者）