2 
<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ますか?

4

1 に答える 1

15

は、単一のフォームコントロール<label>にラベルを付けます。フォーム コントロールのグループに「ラベル」を付けたい場合は、フィールドセットと凡例を使用します。

<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、読者への演習として残されています)

于 2013-10-18T19:40:32.413 に答える