Как создать флажок с кликабельным ярлыком?

Как я могу создать флажок 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 может содержать только один элемент управления. Сама метка может быть расположена до или после ассоциированного элемента управления.

Использование этого метода имеет ряд преимуществ перед 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 для выбора и отображения ваших ярлыков из всех атрибутов значения вашего флажка (соответственно).
Изменить: Это будет работать только с браузерами на основе webkit и blink (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');
    });
});