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

クリック可能なラベルが付いた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に含めることができる制御エレメントは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>

ラベルが入力に関連付けられていることを確認してください。

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>

また、CSS疑似要素を使用して、チェックボックスのすべての値属性から（それぞれ）ラベルを選択して表示することもできます。
編集：これは、Webkitと点滅ベースのブラウザー（Chrome（ium）、Safari、Opera ...）でのみ機能するため、ほとんどのモバイルブラウザーで機能します。ここではFirefoxまたはIEはサポートされていません。
これは、アプリにwebkit / blinkを埋め込む場合にのみ役立ちます。

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

すべての疑似要素ラベルはクリック可能です。

デモ：http://codepen.io/mrmoje/pen/oteLl、+ それの要旨

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

それも動作します：

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>

これはあなたを助けるはずです：W3Schools-ラベル

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

label要素とfor属性を使用して、チェックボックスに関連付けます。

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />

チェックボックス付きの角度マテリアルラベル

<mat-checkbox>Check me!</mat-checkbox>

これを使って

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


$("#checkbox_lbl").click(function(){ 
    if($("#checkbox_id").is(':checked'))
        $("#checkbox_id").removAttr('checked');
    else
       $("#checkbox_id").attr('checked');
    });
});