Перемкніть перемикач 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

Це ускладнює стилізацію етикетки і вимагає обгортання тексту ще більшою кількістю елементів.

— Совіт

2

Так, але якщо ви не стайлінг, це полегшує отримання необхідних функціональних можливостей. Мені не подобається додавати додаткові ідентифікатори та атрибути "for".

— Доктор К. Іларій

4

+1 посвідчення особи можуть бути дуже злими, тому найкраще уникати їх як загальне правило

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

обгортання - найкраще рішення для використання 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

@Alexander, абсолютно. Тільки Safari версії 2 та старішої версії не підтримує.

— Фредерік Хаміді

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

У мене були проблеми з пошуком значення перемикача за допомогою цього методу. Альтернатива - використовувати область потрапляння, збільшуючи клікабельну область кнопки .

— Крістофер Грігг
джерело