クリック可能なラベル付きのチェックボックスを作成するにはどうすればいいですか? 質問する

方法1: ラベルタグをラップする

チェックボックスをlabelタグ内に囲みます:

<label><input type="checkbox" name="checkbox" value="value">Text</label>

方法2:for属性を使用する

属性を使用しますfor（チェックボックスに一致しますid）：

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

注意: ID はページ上で一意である必要があります。

説明

他の回答では言及されていないため、ラベルには最大 1 つの入力を含めることができ、for属性を省略すると、そのラベル内の入力用であると見なされます。

抜粋翻訳元（強調は筆者による）：

[for 属性] は、定義されるラベルを別のコントロールに明示的に関連付けます。この属性が存在する場合、その値は、同じドキュメント内の他のコントロールの id 属性の値と同じである必要があります。存在しない場合、定義されるラベルは要素の内容に関連付けられます。

ラベルを別のコントロールに暗黙的に関連付けるには、コントロール要素が LABEL 要素のコンテンツ内にある必要があります。この場合、LABEL にはコントロール要素を1 つだけ含めることができます。ラベル自体は、関連付けられたコントロールの前または後に配置できます。

この方法を使用すると、次のような利点がありますfor。

• すべてのチェックボックスに を割り当てる必要はありませんid(素晴らしい!)。

• で追加属性を使用する必要はありません<label>。

• 入力のクリック可能な領域はラベルのクリック可能な領域でもあるため、チェックボックスを制御できるクリック可能な場所は 2 つではなく、入力<input>と実際のラベル テキストがどれだけ離れていても、また、適用する CSS の種類に関係なく、1 つだけです。

CSS を使ったデモ:

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}

<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>