html5htmlcheckbox

Как сделать так, чтобы флажок также не нажимался на текстовую метку?

просмотры: 26.6K

Checkboxes в HTML формах не имеют неявных меток . Добавление явной метки (некоторого текста) рядом с ним не переключает checkbox .

Как сделать так, чтобы флажок также не нажимался на текстовую метку?

Источник

Ответов (8)

Решение

Установите display свойство CSS для метки как блочный элемент и используйте его вместо своего div - он сохраняет семантическое значение метки, позволяя при этом любой стиль, который вам нравится.

Например:

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

Источник

это должно работать:

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

если нет, пожалуйста, помогите мне!

Источник

Вам нужно просто обернуть флажок в теге метки, как это

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

FIDDLE

или вы также можете использовать атрибут for метки и идентификатор вашего флажка, как показано ниже

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

FIDDLE

Источник

Вы можете обернуть свой флажок в метку:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
Источник

Если вы правильно разметите свой HTML-код, в javascript нет необходимости. Следующий код позволит пользователю щелкнуть текст метки, чтобы установить флажок.

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

Для атрибута на этикетку элемент ссылку на ид атрибут элемента ввода и браузер делает все остальное.

Это было тестирование для работы в:

  • IE6
  • IE7
  • Fire Fox
Источник

Ронни,

Если вы хотите заключить текст метки и флажок внутри элемента оболочки, вы можете сделать следующее:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
Источник

Обтекание этикеткой по-прежнему не позволяет щелкнуть «где-нибудь в поле» - по-прежнему только по тексту! Это делает мою работу за меня:

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

но, к сожалению, у него много javascript, который эффективно переключается дважды.

Источник

Как указано @Gatekiller и другими, правильным решением является тег <label>.

Щелчок по тексту - это хорошо, но есть еще одна причина использовать тег <label>: доступность. Инструменты, которые люди с ослабленным зрением используют для доступа в Интернет, нуждаются в <label> для чтения значения флажков и переключателей. Без <label> им приходится угадывать, основываясь на окружающем тексте, и они часто ошибаются или вынуждены сдаваться.

Очень неприятно столкнуться с формой, которая гласит: «Пожалуйста, выберите способ доставки: радио-кнопка1, радио-кнопка2, радио-кнопка3».

Обратите внимание, что веб-доступность - сложная тема; <label> - это необходимый шаг, но их недостаточно, чтобы гарантировать доступность или соответствие государственным постановлениям там, где это применимо.

Источник