Переключение radio кнопки и checkbox нажатием на подпись в HTML
31.01.2015
При создании HTML формы часто применяются радио кнопки (radio) и переключатели (checkbox). В самом простом виде они добавляются следующими тегами:
<input type="radio" name="mycheck" value="1"/> Значение 1<br/>
<input type="radio" name="mycheck" value="2"/> Значение 2<br/>
<input type="radio" name="mycheck" value="3"/> Значение 3
<input type="checkbox" name="mycheck1" value="1"/> Значение 1<br/>
<input type="checkbox" name="mycheck2" value="2"/> Значение 2<br/>
<input type="checkbox" name="mycheck3" value="3"/> Значение 3
В результате получается следующие формы:
Значение 1
Значение 2
Значение 3
Значение 1
Значение 2
Значение 3
В общем-то, все работает и можно оставить все так, но все же, есть некоторые неудобства. Для использования установленных переключателей, посетителю страницы необходимо нажать именно на них.
Для создания такой связи между подписью и переключателем (а так же других элементов) в HTML применяется тег LABEL. С его помощь можно связать элементы двумя способами.
Первый способ – размещение переключателя и его подписи в пределах одного тега:
<label>
<input type="radio" name="mycheck" value="1"/> Значение 1<br/>
</label>
<label>
<input type="radio" name="mycheck" value="2"/> Значение 2<br/>
</label>
<label>
<input type="radio" name="mycheck" value="3"/> Значение 3
</label>
* Если в пределах одного тега находится несколько переключателей, то по нажатию на подписи, срабатывает только первый.
Второй способ – обрамление подписи тегами LABEL с указанием для них атрибута FOR, который должен содержать ID нужного переключателя:
<input type="checkbox" name="mycheck1" value="1"/>
<label for="ch2">Значение 1</label><br/><input type="checkbox" name="mycheck2" value="2"/>
<label for="ch3">Значение 2</label><br/><input type="checkbox" name="mycheck3" value="3"/>
<label for="ch4">Значение 3</label>
В результате получим формы, где переключатели управляются по нажатию на их подписи:
Значение 1
Значение 2
Значение 3
Значение 1
Значение 2
Значение 3
Другие материалы:
Установить, снять галочку, узнать состояние CheckBox в jQuery
Переключение radio кнопки и checkbox нажатием на подпись в HTML
Звук по нажатию на ссылку
еще более стильных флажков HTML/CSS | Джейсон Найт | CodeX
Флажки HTML/CSS с улучшенным стилем | Джейсон Найт | КодX | Medium Опубликовано в·
Чтение: 4 мин.
·
11 июня 2022 г. префиксы браузера для Safari, а также предполагая, что Safari не использует сломанную и бессмысленную реализацию флажков, где он будет применять поле вокруг сгенерированного контента, который нельзя отключить. Я переписал демонстрацию, чтобы использовать абсолютное позиционирование дочернего элемента, исправляя поддержку Safari.Автор Джейсон Найт
2,1 тыс. подписчиков
· Писатель дляКонсультант по доступности и эффективности, веб-разработчик, музыкант и просто заноза в заднице
9 0004Еще от Джейсона Найта и CodeX
Джейсон Найт
в
Не все итераторы массивов в JavaScript одинаковы… или нет?
Много раз я выражал свою неприязнь к «Array.forEach», и это золотая комедия, как его защитники придумывают неубедительные оправдания, отвлекающие маневры…
·Чтение через 11 минут·30 маяАнмол Томар
в
26 приемов Python, которые следует изучить перед написанием следующего кода
Приемы, которые изменят вашу жизнь проще, чем разработчик Python
· 6 минут чтения·6 июняАнмол Томар
в
Советы и рекомендации по Jupyter Notebook, которые вы хотели бы знать раньше
Улучшение работы с Jupyter Notebook
·Чтение через 6 мин·22 маяДжейсон Найт
в
HTTP-параллелизм, push, «предварительная загрузка» и почему раздувание разметки — враг но это проблема заключалась в том, что клиент, которым я был…
·14 минут чтения·23 январяПросмотреть все от Джейсона Найта
Рекомендовано на Medium
Джейсон Найт
в
Понимание CSS Позиция: Липкая
Пытаясь помочь различным пользователям форумов по всему Интернету, я понял, что то, как position:sticky, похоже, сбивает людей с толку.
Как это работает в… ·4 минуты чтения·29 январяДжейсон Найт
in
CSS снижает потребность в изображениях — Часть 3, Давайте напишем скрипт
Продолжение: Часть 1, Часть 2
·18 минут чтения·16 январяСписки
Кодирование и разработка
11 историй·30 сохранений
Общие знания в области кодирования
20 историй·49 сохранений
Технологии и инструменты
15 историй·7 сохранений
Истории, которые помогут вам расти как разработчику программного обеспечения
19 историй·159 сохранений 9000 3
Джейсон Найт
в
CSS снижает потребность в изображениях — Часть 4, Реальный сценарий приложения
В предыдущей статье я создал необходимый сценарий библиотеки для вспомогательных и модальных окон DOM. Вы можете просмотреть этот сценарий здесь…
·17 минут чтения·16 январяДжейсон Найт
в
Адам Ватан (Часть 2): Полное невежество
В части 1 я говорил о том, как я нахожу Адам Ватан и ему подобные быть мошенниками.
Телефонис. Претенденты. Они танцуют на грани того, чтобы быть хищниками… ·16 мин чтения·8 мартаДжейсон Найт
в
CSS уменьшает потребность в изображениях — Часть 5, Modal Driven Help
9000 4В этой заключительной части серии я задокументирую справочную систему. Это также показывает, как мало нам нужны изображения с такими вещами, как веб-шрифты и CSS 3…
· 11 минут чтения · 19 январяДжейсон Найт
в
Как CSS уменьшает потребность в изображениях — «Давайте стилизуем калькулятор 90 020
Часть 1 из 3 (запланировано)
·13 минут чтения·5 январяСм. дополнительные рекомендации
Статус
Карьера
Текст в речь
Настройка флажков и переключателей с помощью CSS: Whiteley Designs
Вы когда-нибудь хотели сделать флажки или переключатели более красивыми? Вас раздражает, что каждый браузер отображает эти элементы по-разному? В этом посте будет описан один из методов создания настраиваемых полей ввода со специальными возможностями, совместимых с разными браузерами.
На самом деле нет никаких вариантов стилизации самих входных данных, но мы обойдем это, используя ::before и ::after псевдоэлементов для создания иллюзии красиво настроенных галочек или радиовходов.
Вот наш окончательный результат:
Какой твой любимый вид спорта?
Отметьте подходящие ответы:
Бейсбол
Баскетбол
Футбол
Хоккей
Футбол
Какой твой любимый вид спорта?
Бейсбол
Баскетбол
Футбол
Хоккей
Футбол
Настройка
Сначала нам понадобятся некоторые основные входные данные для работы. Приведенный ниже HTML-код дает нам очень простые поля ввода радио и флажков с одноуровневыми метками, каждая из которых заключена в div.
Примечание. Разметка может различаться в зависимости от вашего приложения, поэтому вам потребуется изменить ее по мере необходимости.
Например, если вы делаете это с Gravity Forms, вам нужно настроить таргетинг на элементы списка, выводимые каждым полем.
<дел>
Этот базовый HTML повторяется для каждого флажка, а также для каждого радио входа с небольшими изменениями, чтобы переключить вход на радио. Вот полная разметка для приведенного выше примера:
question-wrapper .radio-wrapper label::before {
содержимое: "\f111";
размер шрифта: 13px;
верх: 1 пиксель;
слева: 6px;
}
.question-wrapper .radio-wrapper label::after {
радиус границы: 24px;
} 
question-wrapper .checkbox-wrapper label::before,
.question-wrapper .radio-wrapper label::before {
отображение: встроенный блок;
стиль шрифта: обычный;
вариант шрифта: нормальный;
рендеринг текста: авто;
-webkit-font-smoothing: сглаживание;
содержимое: "\f00c";
вес шрифта: 600;
семейство шрифтов: "Font Awesome 5 Pro";
слева: 4px;
положение: абсолютное;
белый цвет;
z-индекс: 10;
верх: 1 пиксель;
фон: белый;
-webkit-background-clip: текст;
-webkit-text-fill-color: прозрачный;
непрозрачность: 0;
}
.question-wrapper .checkbox-wrapper label::after,
.question-wrapper .radio-wrapper label::after {
содержание: " ";
ширина: 24 пикселя;
высота: 24 пикселя;
радиус границы: 2px;
цвет фона: прозрачный;
граница: 2px сплошная #b5267b;
положение: абсолютное;
слева: 0;
сверху: 0;
}
.question-wrapper .checkbox-wrapper input[type="checkbox"]:checked + label::before,
.question-wrapper .