Fare clic sul testo per selezionare il pulsante di opzione corrispondente

Sto creando un'applicazione web quiz utilizzando PHP. Ogni domanda è composta da uno <label> separato e ha 4 possibili scelte, utilizzando radio buttons per consentire all'utente di selezionare la sua risposta. La corrente di HTML per una sola domanda si presenta come:Fare clic sul testo per selezionare il pulsante di opzione corrispondente

<label for="349">What is my middle name?</label> 
<br> 
<input id="349" type="radio" value="1" name="349">Abe 
<br> 
<input id="349" type="radio" value="2" name="349">Andrew 
<br> 
<input id="349" type="radio" value="3" name="349">Andre 
<br> 
<input id="349" type="radio" value="4" name="349">Anderson 
<br>

vorrei che l'utente avere la possibilità di fare clic sul testo associato con pulsante di scelta. In questo momento, l'utente può solo fare clic sul pulsante di opzione stesso, il che ritengo sia un compito piuttosto ingombrante.

Ho letto Unable to select a particular radio button choice by clicking on the choice text e il suggerimento punta a rendere gli attributi for e id corrispondenti ai tag. Ho fatto questo e ancora non funziona.

La mia domanda è: Mi piacerebbe essere in grado di fare clic sul testo di un oggetto <input type="radio">, al contrario di essere in grado di selezionare solo il pulsante di opzione. So che ho letto di questo prima ma non riesco a trovare alcuna soluzione al mio problema. Qualsiasi aiuto o suggerimento è molto apprezzato!

fonte

2011-10-22 Abundnce10

136

Nel codice, hai un'etichetta sul modulo stesso. Vuoi mettere le etichette su ogni singolo gruppo radio, come mostrato di seguito.

<form> 
 
    <p>What is my middle name?</p> 
 
    <br> 
 
    <input id="349" type="radio" value="1" name="question1"> 
 
    <label for="349">Abe</label> 
 
    <br> 
 
    <input id="350" type="radio" value="2" name="question1"> 
 
    <label for="350">Andrew</label> 
 
    <br> 
 
    <input id="351" type="radio" value="3" name="question1"> 
 
    <label for="351">Andre</label> 
 
    <br> 
 
    <input id="352" type="radio" value="4" name="question1"> 
 
    <label for="352">Anderson</label> 
 
    <br> 
 
</form>

Si dovrebbe tenere a mente che due elementi non dovrebbero mai avere lo stesso ID. L'attributo name viene utilizzato in modo che i pulsanti di opzione funzionino come un gruppo e consentano solo una singola selezione alla volta.

fonte

2011-10-22 23:23:20 Nathan

Ottimamente semplice. Mi piace quando viene riscoperta una caratteristica quasi nascosta dei tag – foochow

L'etichetta etichetta deve essere intorno a ciascuna risposta, ad es. intorno ad Abe, Andrew, ecc ... e deve essere unico per ognuno di essi.

fonte

2011-10-22 23:24:04 endyourif

Sembra esserci uno spazio leggermente non selezionabile tra il pulsante di opzione e l'etichetta se eseguito in base alla risposta di Nathan. Ecco come farli aderire perfettamente (vedi this article):

<form> 
    <p>What is my middle name?</p> 
    <br> 
    <label><input id="349" type="radio" value="1" name="question1">Abe</label> 
    <br> 
    <label><input id="350" type="radio" value="2" name="question1">Andrew</label> 
    <br> 
    <label><input id="351" type="radio" value="3" name="question1">Andre</label> 
    <br> 
    <label><input id="352" type="radio" value="4" name="question1">Anderson</label> 
    <br> 
</form>

fonte

2015-12-14 12:27:51 user21820

Preferisco questa risposta. Ma sei sicuro di aver persino bisogno degli attributi "per" con questo approccio? – Piddu

@Piddu: Penso che tu abbia ragione, quindi ho aggiornato la mia risposta. Grazie! – user21820

si può fare in questo modo

<label for="1">hi</label> 
<input type="radio" id="1" />

Quindi, se si fa clic sul testo o come etichetta seleziona il pulsante di scelta. Ma se fate questo ...

<label for="1">//</label>

e si aggiunge questo a ciò che il codice che ho scritto poco prima di questo, allora, se si fa clic sulla seconda etichetta di allora sarà anche selezionare la radio.

fonte

2016-10-10 01:19:08

L'annidamento del tag di input all'interno del tag etichetta assicura che l'etichetta appaia proprio accanto al pulsante di opzione. Con gli approcci precedenti suggeriti, è possibile inserire il tag etichetta ovunque all'interno del file html e selezionerà il pulsante di opzione associato quando si fa clic.Check this out:

<html> 
 
<body> 
 

 
<form> 
 
    <p>What is my middle name?</p> 
 
    <br> 
 
    <input id="349" type="radio" value="1" name="question1"> 
 

 
    <br> 
 
    <input id="350" type="radio" value="2" name="question1"> 
 
    <label for="350">Andrew</label> 
 
    <br> 
 
    <input id="351" type="radio" value="3" name="question1"> 
 

 
    <br> 
 
    <input id="352" type="radio" value="4" name="question1"> 
 
    <label for="352">Anderson</label> 
 
    <br> 
 
</form><br/> 
 
<p>This is a paragraph</p> 
 
    <label for="349">Abe</label><br/> 
 
    <label for="351">Andre</label> 
 
    
 
</body> 
 
</html>

Facendo in questo modo elimina invece questo difetto:

<form> 
 
    <p>What is my middle name?</p> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="349" type="radio" value="1" name="question1"/>Abe 
 
    </label> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="350" type="radio" value="2" name="question1"/>Andrew 
 
    </label> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="351" type="radio" value="3" name="question1"/>Andre 
 
    </label> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="352" type="radio" value="4" name="question1"/>Anderson 
 
    </label> 
 
    <br> 
 
</form>

fonte

2017-10-14 13:52:38 Neo

Fare clic sul testo per selezionare il pulsante di opzione corrispondente

risposta

Problemi correlati