Cliquez sur le texte pour sélectionner le bouton radio correspondant

je crée une application Web quiz en utilisant PHP. Chaque question est composée d'un <label> séparé et a 4 choix possibles, en utilisant radio buttons pour permettre à l'utilisateur de choisir sa réponse. Le HTML actuel pour une seule question ressemble à: 

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

je voudrais que l'utilisateur à avoir l'option de cliquer sur le texte associé au bouton radio. en ce moment, l'utilisateur ne peut cliquer que sur le bouton radio lui - même-qui Je trouve être une très lourde tâche.

j'ai lu Impossible de sélectionner un bouton radio choix en cliquant sur le choix du texte et la suggestion des points en vue de rendre le for et id attributs des balises match. J'ai fait ça et ça ne marche toujours pas.

ma question Est: j'aimerais pouvoir cliquer sur le texte d'un objet <input type="radio"> , au lieu de ne pouvoir sélectionner le bouton radio lui-même. je sais que j'ai lu à ce sujet avant, mais ne semble pas trouver de solution à mon problème. Toute aide ou suggestion est très appréciée!

72
demandé sur Community 2011-10-23 03:17:08

5 réponses

Dans votre code, vous avez une étiquette sur le formulaire lui-même. Vous voulez mettre des étiquettes sur chaque groupe de boutons radio, comme indiqué ci-dessous. 

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

vous devez garder à l'esprit que deux éléments ne doivent jamais avoir le même ID. L'attribut name est utilisé de sorte que les boutons radio fonctionnent comme un groupe et ne permettent qu'une seule sélection à la fois.

144
répondu Nathan 2017-02-28 02:56:54

il semble qu'il y ait un peu d'espace entre le bouton radio et l'étiquette s'il est fait selon la réponse de Nathan . Voici comment les faire adhérer de façon transparente (voir cet 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>
30
répondu user21820 2017-01-23 11:29:18

l'étiquette doit être placée autour de chaque réponse, par exemple autour D'Abe, Andrew, etc... et il doit être unique pour chacun d'entre eux.

0
répondu endyourif 2011-10-22 23:24:04

Vous pouvez le faire comme ceci 

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

Donc, si vous cliquez sur le texte ou l'étiquette, il sélectionne le bouton radio. Mais si tu fais ça... 

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

et vous ajoutez cela à ce que le code que j'ai écrit juste avant cela, puis si vous cliquez sur la 2ème étiquette, alors il va également sélectionner la radio.

0
répondu Samuel Chen 2016-10-10 05:10:56

imbriquer l'étiquette d'entrée dans l'étiquette d'étiquette garantit que l'étiquette apparaît juste à côté du bouton radio. Avec les approches précédentes suggérées, vous pouvez mettre la balise label n'importe où dans le fichier html et il sélectionnera le bouton radio associé lorsque cliqué. Regardez ça: 

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

le Faisant de cette façon au lieu de cela élimine ce défaut: 

<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>
0
répondu Neo 2017-10-14 13:52:38