Как мне сделать так, чтобы флажок переключался при нажатии на текстовую метку?
Вопрос
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" />
А для Атрибут элемента метки ссылается на идентификатор атрибут входного элемента, а браузер сделает все остальное.
Это было тестирование на работу в:
- IE6
- IE7
- Fire Fox
Как указали @Gatekiller и другие, правильным решением является тег <label>.
Щелчок по тексту — это хорошо, но есть и другая причина использовать тег <label>:доступность.Инструментам, которые люди с ослабленным зрением используют для доступа в Интернет, нужны теги <label>, чтобы считывать значение флажков и переключателей.Без <label> им приходится гадать на основе окружающего текста, и они часто ошибаются или сдаются.
Очень неприятно столкнуться с формой, которая гласит: «Пожалуйста, выберите способ доставки: радио-кнопка1, радио-кнопка2, радио-кнопка3».
Обратите внимание, что доступность Интернета — сложная тема;<label> — необходимый шаг, но его недостаточно, чтобы гарантировать доступность или соответствие государственным постановлениям там, где это применимо.
Ронни,
Если вы хотите заключить текст метки и флажок внутри элемента-оболочки, вы можете сделать следующее:
<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>
Вам нужно просто обернуть флажок в тег метки, вот так
<label style="height: 10px; width: 150px; display: block; ">
[Checkbox Label Here] <input type="checkbox"/>
</label>
или вы также можете использовать для атрибут метки и идентификатор вашего флажка, как показано ниже
<label for="other">Other Details</label>
<input type="checkbox" id="other" />
это должно работать:
<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>
если это не так, пожалуйста, поправьте меня!
Обертывание с помощью метки по-прежнему не позволяет щелкнуть «в любом месте поля» — все еще только по тексту!Это делает работу для меня:
<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, который эффективно переключается дважды.