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

Ответ 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>

Ответ 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>

Ответ 3

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

Ответ 4

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

Ответ 5

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

Ответ 6

Он тоже работает:

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

Ответ 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>

Ответ 8

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

Ответ 9

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

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

Ответ 10

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

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