Переключите переключатель HTML, нажав на его ярлык - PullRequest
80 голосов
/ 18 ноября 2010

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

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

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

Ответы [ 4 ]

152 голосов
/ 18 ноября 2010

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

<label>
   <input type="radio" name="mode" value="create">
   <i>create table</i>
</label>
63 голосов
/ 18 ноября 2010

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

<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>
5 голосов
/ 29 ноября 2015

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

<label>
    <input type="radio" name="mode" value="create"><i>create table</i>
</label>
1 голос
/ 06 декабря 2016

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...