Переключите переключатель HTML, щелкнув его метку

87

Есть ли простой способ переключить переключатель - при нажатии на текст рядом с ним - без добавления какой-либо большой Javascript Framework в мой маленький проект PHP?

Веб-форма выглядит так:

<html>
<body>
<form method="post">
<p>Mode:<br /> 
<input type="radio" name="mode" value="create"><i>create table</i><br />
<input type="radio" name="mode" value="select" checked>select records (can specify id)<br />
<input type="radio" name="mode" value="insert">insert 1 record (must specify all)<br />
<input type="radio" name="mode" value="delete">delete records (must specify id)<br />
<input type="radio" name="mode" value="drop"><i>drop table</i><br />
</p>
<p>Id: <input type="text" name="id" size=32 maxlength=32 /> (32 hex chars)</p>

<p>Latitude: <input type="text" name="lat" size=10 /> (between -90 and 90)</p>
<p>Longitude: <input type="text" name="lng" size=10 /> (between -90 and 90)</p>
<p>Speed: <input type="text" name="spd" size=10 /> (not negative)</p>
<p><input type="submit" value="OK" /></p>
</form>
</body>
</html>

javascript html radio-button

— Александр Фарбер
источник

164

Вы также можете обернуть свои элементы, не давая каждому из них идентификатора, поскольку a <label>неявно используется для входных данных, которые он содержит, например:

<label>
   <input type="radio" name="mode" value="create">
   <i>create table</i>
</label>

— Ник Крейвер
источник

4

Это усложняет стилизацию метки и требует, чтобы вы добавили в текст еще больше элементов.

— Soviut

2

Да, но если вы не занимаетесь укладкой, вам будет проще получить желаемую функциональность. Мне не нравится добавлять дополнительные идентификаторы и атрибуты «для».

— Д-р К. Хилариус

4

+1 ID могут быть очень опасными, поэтому лучше избегать их, как правило,

— Крис Стивенс

Обертывание - лучшее решение для использования idи forбез упаковки. Причина в том, что если метка имеет широкое поле и пользователь щелкает в зоне наилучшего восприятия между флажком и меткой (а они, скорее всего, это делают), то ничего не происходит. Скрипка здесь: jsfiddle.net/v157ctja/5

— Марк Юний Брут

72

Вы можете использовать <label>элементы, которые предназначены именно для этого:

<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>

— Фредерик Хамиди
источник

1

@ Александр, конечно. Только Safari версии 2 и ниже не поддерживает его.

— Frédéric Hamidi

3

И после этого вы можете использовать селектор, input#radCreateMode:checked ~ labelчтобы применить стили к метке. Применение стилей к меткам при выборе невозможно, если мы вложим ввод внутри метки.

— Зухаиб Али

1

Это действительно должен быть принятый ответ, это правильный способ сделать это.

— greco.roamin

1

Я использую Safari v 13, и этот метод у меня не сработал. Выделение переключателя можно снять, но нельзя. Мне пришлось обернуть метку ввода: <label> <input> мой текст метки </label>. Обратите внимание, что я не использую ни <form>, ни <fieldset>.

— IAM_AL_X

Убедитесь, что значение атрибута for - это правильный идентификатор для ввода. На всякий случай, если кто-то совершит такую же ошибку, как я.

— Кевин .NET,

5

Оборачивание ввода под этикеткой должно работать.

<label>
    <input type="radio" name="mode" value="create"><i>create table</i>
</label>

— Джейсон Чинг
источник

1

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

— Кристофер Григг
источник