[解決済み] クリック可能なラベルを持つチェックボックスを作成するには？

質問

ラベルがクリック可能なHTMLチェックボックスはどのように作成すればよいですか？（つまり、ラベルをクリックするとチェックボックスがオン/オフになるということです）

どのように解決するのですか？

方法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 属性があれば、その中の入力用であるとみなされます。

からの抜粋 w3.org (私が強調した)

[for属性は]定義されるラベルを他のコントロールと明示的に関連付けます。この属性がある場合、その値は同じ文書内の他のコントロールのid属性の値と同じでなければなりません。 存在しない場合、定義されているラベルは要素のコンテンツと関連づけられます。

ラベルを暗黙的に他のコントロールに関連付けること。 コントロール要素はLABEL要素の内容内になければなりません。 . この場合、LABELに含めることができるのは 一つ コントロール要素を使用します。ラベル自体は、関連するコントロールの前または後に配置されることがある。

この方法を使用すると for :

• を割り当てる必要はありません。 id をすべてのチェックボックスに追加することができます（すばらしい！）。

• での余分な属性は必要ありません。 <label> .

• 入力のクリック可能な領域はラベルのクリック可能な領域でもあるので、チェックボックスを制御するためにクリックする場所が2つに分かれているわけではありません。 <input> と実際のラベルテキストがどのようなものであっても、またどのようなCSSが適用されていても、です。

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>