Checkboxes
в HTML
формы не имеют с ними неявных меток. Добавление ярлыка (некоторый текст) рядом с ним не переключает checkbox
.
Как я могу установить флажок, нажав на текстовую метку?
Checkboxes
в HTML
формы не имеют с ними неявных меток. Добавление ярлыка (некоторый текст) рядом с ним не переключает checkbox
.
Как я могу установить флажок, нажав на текстовую метку?
Задайте свойство CSS display
для ярлыка как элемент блока и используйте его вместо вашего div - он сохраняет семантическое значение метки, позволяя вам любой стиль, который вам нравится.
Например:
label {
width: 100px;
height: 100px;
display: block;
background-color: #e0e0ff;
}
<label for="test">
A ticky box! <input type="checkbox" id="test" />
</label>
Если вы правильно помечаете свой HTML-код, вам не нужно использовать javascript. Следующий код позволит пользователю щелкнуть по тексту ярлыка, чтобы поставить галочку.
<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />
Атрибут for для элемента метки ссылается на атрибут id на элементе ввода и в браузере делает все остальное.
Это тестирование для работы в:
Как указано @Gatekiller и другими, правильным решением является <label> тег.
Щелчок в тексте приятный, но есть еще одна причина использовать символ <label> тег: доступность. Инструменты, которые люди с ослабленным зрением используют для доступа в Интернет, нуждаются в <label> s для считывания значений флажков и переключателей. Без <label> s, они должны угадывать, основываясь на окружающем тексте, и они часто ошибаются или должны отказаться.
Очень сложно столкнуться с формой, которая гласит: "Пожалуйста, выберите способ доставки, радиокнопку1, радиокнопку2, радиокнопку3".
Обратите внимание, что доступность в Интернете - сложная тема; <label> s являются необходимым шагом, но они недостаточны для обеспечения доступности или соблюдения правительственных правил там, где они применяются.
Ронни,
Если вы хотите вставить текст ярлыка и флажок внутри элемента оболочки, вы можете сделать следующее:
<label for="surname">
Surname
<input type="checkbox" name="surname" id="surname" />
</label>
Вы можете обернуть свой флажок в метке:
<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
<input type="checkbox" name="surname">
</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!
Вам нужно просто обернуть флажок в теге метки, как это показано на рисунке
<label style="height: 10px; width: 150px; display: block; ">
[Checkbox Label Here] <input type="checkbox"/>
</label>
или вы также можете использовать атрибут для метки и id вашего флажка, как показано ниже
<label for="other">Other Details</label>
<input type="checkbox" id="other" />
Обтекание этикеткой по-прежнему не позволяет щелкнуть "в любом месте коробки" - все еще только текст! Это делает для меня работу:
<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, который эффективно переключается дважды.