атрибут - which of the following attributes can be specified on any html element choose all that apply




Как я могу установить флажок, нажав на текстовую метку? (6)

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

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


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

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

FIDDLE

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

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

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

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

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

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


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

<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, который эффективно переключается дважды.


Установите свойство 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>

если это не так, pleae corect me!







checkbox