Attiva / disattiva il pulsante di opzione HTML facendo clic sulla sua etichetta

87

Esiste un modo semplice per attivare / disattivare un pulsante di opzione - quando si fa clic su un testo vicino ad esso - senza introdurre alcun grande framework Javascript nel mio piccolo progetto PHP?

Il modulo web ha questo aspetto:

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

164

Puoi anche avvolgere i tuoi elementi senza dare a ciascuno un ID, poiché a <label>è implicitamente per l'input che contiene, in questo modo:

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

— Nick Craver
fonte

4

Ciò rende più difficile lo stile dell'etichetta e richiede di racchiudere il testo in ancora più elementi.

— Soviut

2

Sì, ma se non stai disegnando, è più facile ottenere la funzionalità che desideri. Non mi piace dover aggiungere ID extra e attributi "for".

— Dr. C. Hilarius

4

Gli ID +1 possono essere molto malvagi, quindi è meglio evitarli come regola generale

— Chris Stephens,

il confezionamento è una soluzione superiore all'uso ide forsenza avvolgimento. Il motivo è che se l'etichetta ha un ampio margine e l'utente fa clic nel punto ottimale tra la casella di controllo e l'etichetta (come è più probabile che faccia), non accade nulla. Suona

— Marcus Junius Brutus

72

Puoi utilizzare <label>elementi progettati per fare esattamente questo:

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

— Frédéric Hamidi
fonte

1

@Alexander, assolutamente. Solo Safari versione 2 e inferiore non lo supportano.

— Frédéric Hamidi

3

Successivamente è possibile utilizzare il selettore input#radCreateMode:checked ~ labelper applicare gli stili all'etichetta. L'applicazione di stili alle etichette durante la selezione non è possibile se annidiamo l'input all'interno dell'etichetta.

— Zuhaib Ali

1

Questa dovrebbe davvero essere la risposta accettata, è il modo corretto per farlo.

— greco.roamin

1

Sto usando Safari v 13 e questo metodo non ha funzionato per me. Il pulsante di opzione potrebbe essere deselezionato, ma non selezionato. Ho dovuto avvolgere l'etichetta attorno all'input: <label> <input> il testo della mia etichetta </label>. Nota che non sto usando un <form>, né un <fieldset>.

— IAM_AL_X

Assicurati che il valore dell'attributo for sia l'id corretto per l'input. Nel caso in cui qualcuno avesse fatto il mio stesso errore.

— Kevin .NET,

5

Avvolgere l'input sotto l'etichetta dovrebbe funzionare.

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

— Jason Ching
fonte

1

Ho avuto problemi a trovare il valore del pulsante di opzione utilizzando questo metodo, un'alternativa è utilizzare un'area attiva aumentando l'area selezionabile di un pulsante .

— Christopher Grigg
fonte