テキストラベルをクリックしてもチェックボックスを切り替えるにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/2123

  •  08-06-2019
  •  | 
  •  

質問

Checkboxes で HTML フォームには暗黙的なものはありません ラベル 彼らと一緒に。明示的なラベル (テキスト) をその横に追加しても、 checkbox.

テキストラベルをクリックしてもチェックボックスを切り替えるにはどうすればよいですか?

役に立ちましたか？

解決

CSSを設定する display ラベルのプロパティをブロック要素にして、それを div の代わりに使用します。これにより、ラベルのセマンティックな意味が維持されながら、好みのスタイルが可能になります。

例えば：

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}
<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

他のヒント

HTML コードを正しくマークアップしていれば、JavaScript は必要ありません。次のコードにより、ユーザーはラベル テキストをクリックしてチェックボックスをオンにすることができます。

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

の のために label 要素の属性は、 ID input 要素の属性を指定すると、残りの処理はブラウザーが行います。

これは以下で動作するようにテストされています。

  • IE6
  • IE7
  • Firefox

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

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

次のようなフォームに直面すると非常にイライラします。 「配送方法、ラジオボタン1、ラジオボタン2、ラジオボタン3を選択してください。」

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

ロニー、

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

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

チェックボックスをラベルで囲むことができます。

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

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

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

フィドル

または、 のために ラベルの属性と ID 以下のようなチェックボックスの

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

フィドル

これは機能するはずです:

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

そうでない場合は、修正してください。

ラベルで折り返しても、「ボックス内のどこでも」クリックすることはできません。依然としてテキスト上のみです。これは私にとっては役に立ちます:

<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 が多数含まれています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top