Facendo clic sul testo per selezionare il pulsante di opzione corrispondente

Sto creando un quiz di applicazioni web utilizzando PHP. Ogni domanda è composto da un separato <label> e ha 4 possibili scelte, utilizzando radio buttons per consentire all’utente di selezionare il suo/la sua risposta. HTML corrente per una singola domanda è:

<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 hanno la possibilità di cliccare sul testo associato con i radio button. Ora, l’utente può fare clic sul pulsante di opzione che ho trovato per essere abbastanza un compito arduo.

Ho letto Non è possibile selezionare un particolare pulsante di opzione scelta cliccando sulla scelta del testo e il suggerimento punti a for e id attributi del tag match. Io ho fatto così e ancora non funziona.

La mia domanda è: mi piacerebbe essere in grado di scegliere il testo di un <input type="radio"> oggetto, anziché solo essere in grado di selezionare il pulsante di opzione stessa. So che ho letto su questo prima, ma non riesco a trovare una soluzione al mio problema. Qualsiasi aiuto o suggerimenti sono molto apprezzati!

InformationsquelleAutor Abundnce10 | 2011-10-22



6 Replies
  1. 158

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

    HTML:

    <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 i due elementi non dovrebbero mai avere lo stesso ID. Il name attributo è utilizzato in modo che i pulsanti di funzione come un gruppo e consentono solo una singola selezione alla volta.

    • Ottimamente semplice. L’amore è quando un quasi nascosto funzione di tag da ri-scoprire
  2. 32

    Sembra che ci sia un po ‘ unclickable spazio tra il pulsante e l’etichetta, se fatto secondo Nathan‘s risposta. Ecco come fare per farli aderire perfettamente (vedi questo articolo):

    <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>
    • Io preferisco questa risposta. Ma sei sicuro che anche il “per” gli attributi con questo approccio?
    • Penso che tu abbia ragione, così ho aggiornato la mia risposta. Grazie!
    • Un’altra opzione per evitare che lo spazio tra il pulsante e l’etichetta, è semplicemente non c’ <input id="349" type="radio" value="1" name="question1"><label for="349"> Abe</label> (senza spazi o caratteri tra i tag)
    • La tua soluzione non funziona con Firefox, mentre le mie. =)
    • Ho appena testato il mio modo di chrome e firefox, e trovato che riduce il unclickable spazio da 7 a 3 pixel rimuovendo il carattere di spazio. vedere why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements. i tre pixel rimanenti predefinito margine destro sul pulsante di opzione margin: 3px 3px 0 5px; (è più evidente in firefox c’è un effetto hover per impostazione predefinita), che può essere risolto con i CSS eliminando il margine e la sua sostituzione con imbottitura.
    • Vedo, grazie per indagare! Anche se, per semplicità, mi limiterò a incastrando il tutto in etichetta. =)

  3. 1

    Il tag label dovrebbe essere intorno a ogni risposta, per esempio intorno Abe, Andrea, ecc… e che deve essere unica per ognuno di loro.

  4. 1

    La nidificazione dei tag di input all’interno del tag label garantisce l’etichetta viene visualizzato accanto al pulsante di opzione. Con i precedenti approcci suggeriti, si può mettere il tag label ovunque all’interno del file html e selezionare il relativo pulsante di opzione quando si fa clic. Check this out:

    HTML:

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

    Questo modo, invece elimina questo difetto:

    HTML:

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

  5. 0

    Si può fare come questo

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

    Quindi, se si fa clic sul testo o l’etichetta seleziona il pulsante di opzione.
    Ma se si fa questo…

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

    e di aggiungere a questo che cosa è il codice che ho scritto appena prima di questo, quindi se si sceglie il 2 etichetta poi sarà anche selezionare la radio.

  6. 0

    Ho fatto questo per anni, ma nessuno di questi funziona per me, l’utilizzo di variabili.

        echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
            <label for='$studentID'>$fname</label> $lname<br />\n";
        echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
            <label for='$studentID'>$fname $lname</label><br />\n";

    e qui è la fonte:

            <input type='radio' name='student' id='986875' value='986875'>
            <label for='986875'>John</label> Brown<br />

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *