web-dev-qa-db-ja.com

クリック可能なラベルでチェックボックスを作成する方法

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

htmlcheckboxclicklabel
938
laurent

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

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

説明

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

w3.orgからの抜粋 （私が強調している）：

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

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

このメソッドを使うことは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>
1773
Wesley Murch

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

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

また、CSS疑似要素を使用して、すべてのチェックボックスの値属性からそれぞれラベルを選択して表示することもできます。
編集：これはウェブキットと点滅ベースのブラウザ（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 、+ その要旨

12
moje
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
7
Dave Kiss
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
3
ShaneBlake

それも働きます：

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

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>
2
John
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
1
Christopher Armstrong

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

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

0
James Allardice