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

Question

Как я могу создать флажок HTML с ярлыком, который можно кликать (это означает, что нажатие на ярлык включает / выключает флажок)?

Answer 1

Способ 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>

Answer 2

Просто убедитесь, что метка связана со входом.

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

Answer 3

Вы также можете использовать псевдоэлементы 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, + Суть этого

Answer 4

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

Answer 5

Это тоже работает:

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

Answer 6

<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

Answer 7

Это должно помочь вам: 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>

Answer 8

<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

Answer 9

Используйте это

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

Answer 10

Используйте элемент label и атрибут for, чтобы связать его с флажком:

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