Як створити прапорець із міткою, на яку можна натиснути?

Як я можу створити прапорець 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>

ПРИМІТКА : Ідентифікатор повинен бути унікальним на сторінці!

Пояснення

Оскільки інші відповіді не згадують його, мітка може містити до 1 введення та опускати forатрибут, і вважатиметься, що він є для введення всередині нього.

Витяг з w3.org (з моїм акцентом):

[Атрибут for] явно пов'язує визначену мітку з іншим елементом управління. При наявності значення цього атрибута має бути таким же, як значення атрибута id якогось іншого елемента управління в тому ж документі. У разі відсутності визначена мітка асоціюється із вмістом елемента.

Щоб неявно пов'язати мітку з іншим елементом управління, елемент керування повинен міститись у вмісті елемента LABEL . У цьому випадку LABEL може містити лише один керуючий елемент. Сама етикетка може бути розміщена до або після пов'язаного елемента керування.

Використання цього методу має деякі переваги перед for:

• Не потрібно призначати idкожен прапорець (чудово!).

• Не потрібно використовувати додатковий атрибут у <label>.

• Область для натискання на вході - це також область, на яку можна натиснути мітку, тому немає двох окремих місць для натискання, які можуть керувати прапором - лише одне, незалежно від того, наскільки далеко розташований <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>

Просто переконайтесь, що мітка пов'язана з введенням.

<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 для вибору та відображення міток із усіх значень атрибутів значення (відповідно).
Редагувати: це працюватиме лише з веб-браузерами та браузерами на основі мерехтіння (Chrome (ium), Safari, Opera ....), а отже, і з більшістю мобільних браузерів. Тут немає підтримки Firefox або IE.
Це може бути корисно лише під час вбудовування веб-камери / блимання у ваші програми.

<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');
    });
});