Przełącz przycisk opcji HTML, klikając jego etykietę

87

Czy istnieje prosty sposób na przełączenie przycisku radiowego - po kliknięciu tekstu w pobliżu - bez wprowadzania żadnego dużego środowiska Javascript do mojego małego projektu PHP?

Formularz internetowy wygląda następująco:

<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

— Alexander Farber
źródło

164

Możesz również opakować swoje elementy bez nadawania im identyfikatora, ponieważ a <label>jest niejawnie dla danych wejściowych, które zawiera, na przykład:

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

— Nick Craver
źródło

4

Utrudnia to stylizację etykiety i wymaga zawijania tekstu w jeszcze więcej elementów.

— Soviut

2

Tak, ale jeśli nie stylizujesz, łatwiej jest uzyskać pożądaną funkcjonalność. Nie lubię dodawać dodatkowego identyfikatora i atrybutów „za”.

— Dr. C. Hilarius,

4

Identyfikatory +1 mogą być bardzo złe, więc najlepiej ich unikać

— Chris Stephens

owijanie jest lepszym rozwiązaniem niż używanie idi forbez owijania. Powodem jest to, że jeśli etykieta ma szeroki margines i zdarzy się, że użytkownik kliknie w odpowiednim miejscu między polem wyboru a etykietą (tak jak jest to najbardziej prawdopodobne), nic się nie dzieje. Fiddle here: jsfiddle.net/v157ctja/5

— Marcus Junius Brutus

72

Możesz użyć <label>elementów, które są zaprojektowane do tego właśnie:

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

— Frédéric Hamidi
źródło

1

@Alexander, oczywiście. Tylko Safari w wersji 2 i starszej nie obsługuje tego.

— Frédéric Hamidi

3

Następnie możesz użyć selektora, input#radCreateMode:checked ~ labelaby zastosować style do etykiety. Stosowanie stylów do etykiet przy zaznaczaniu nie jest możliwe, jeśli zagnieżdżamy dane wejściowe wewnątrz etykiety.

— Zuhaib Ali

1

To naprawdę powinna być akceptowana odpowiedź, to właściwy sposób na zrobienie tego.

— greco.roamin

1

Używam Safari v 13 i ta metoda nie działa. Przycisk opcji mógł zostać odznaczony, ale nie został zaznaczony. Musiałem owinąć etykietę wokół danych wejściowych: <label> <input> tekst mojej etykiety </label>. Zauważ, że nie używam <form> ani <fieldset>.

— IAM_AL_X

Upewnij się, że wartość atrybutu for jest poprawnym identyfikatorem dla danych wejściowych. Na wszelki wypadek, gdyby ktoś popełnił ten sam błąd co ja.

— Kevin .NET

5

Owinięcie wejścia pod etykietą powinno działać.

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

— Jason Ching
źródło

1

Miałem problem ze znalezieniem wartości przycisku radiowego tą metodą, alternatywą jest użycie obszaru uderzenia zwiększającego klikalny obszar przycisku .

— Christopher Grigg
źródło