html - How do I make a checkbox toggle from clicking on the text label as well?

Question

Checkboxes in HTML forms don't have implicit labels with them. Adding an explicit label (some text) next to it doesn't toggle the checkbox.

How do I make a checkbox toggle from clicking on the text label as well?

Answer 1

If you correctly markup your HTML code, there is no need for javascript. The following code will allow the user to click on the label text to tick the checkbox.

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

The for attribute on the label element links to the id attribute on the input element and the browser does the rest.

This has been testing to work in:

• IE6
• IE7
• Firefox

Answer 2

ラベルの CSSdisplayプロパティをブロック要素に設定し、それを div の代わりに使用します。ラベルのセマンティックな意味を保持しながら、好きなスタイルを許可します。

例えば：

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}

<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

Answer 3

ロニー、

ラベル テキストとチェックボックスをラッパー要素で囲みたい場合は、次のようにします。

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>

Answer 4

@Gatekiller などで示されているように、正しい解決策は <label> タグです。

テキスト内クリックは便利ですが、<label> タグを使用するもう 1 つの理由があります。アクセシビリティです。視覚障害者が Web にアクセスするために使用するツールには、チェックボックスとラジオ ボタンの意味を読み取るための <label> が必要です。<label> がないと、周囲のテキストに基づいて推測する必要があり、しばしば間違ったり、あきらめたりする必要があります。

「配送方法を選択してください。radio-button1、radio-button2、radio-button3」というフォームに直面するのは非常にイライラします。

Web アクセシビリティは複雑なトピックであることに注意してください。<label> は必要なステップですが、アクセシビリティを保証したり、適用される政府の規制に準拠したりするのに十分ではありません。

Answer 5

チェックボックスをラベルでラップできます。

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>

Answer 6

このように、ラベルタグでチェックボックスをラップするだけです

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>

フィドル

または、以下のようにラベルのfor属性とチェックボックスのidを使用することもできます

<label for="other">Other Details</label>
<input type="checkbox" id="other" />

フィドル

Answer 7

これはうまくいくはずです：

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

そうでない場合は、私を訂正してください！

Answer 8

ラベルで囲んでも、「ボックス内のどこでも」クリックすることはできません - テキスト上だけです! これは私のために仕事をします：

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

残念ながら、効果的に2回トグルするJavaScriptがたくさんあります。