web-dev-qa-db-fra.com

L'attribut "vérifié" des boutons radio ne fonctionne pas

Le bouton radio n'apparaît pas sous la forme checked par défaut. J'ai commencé sans un choix par défaut en effectuant une validation JS très simple et cela ne fonctionnait pas. J'ai donc choisi d'utiliser uniquement les valeurs par défaut jusqu'à ce que je découvre que quelque chose de bizarre se passe. 

Le balisage est valide et j'ai déjà essayé avec FF, Safari et Chrome. Rien ne fonctionne. 

Je pense que c'est un conflit avec la bibliothèque jQuery car le problème disparaît lorsque je supprime le script d'appel.

<label>Do you want to accept American Express?</label> Yes
<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress' value='1' /> No
<input style="width: 20px;" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked" />

htmlformsradio-button
60
Jordan

Si vous avez plusieurs du même nom avec l'attribut vérifié, la dernière radio cochée sur la page sera prise.

<form>
    <label>Do you want to accept American Express?</label>
    Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  />  
    maybe<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  checked="checked" />  
    No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" />
</form>

75
jeeves

C'est peut-être ça:

Y at-il un bogue avec les boutons radio dans jQuery 1.9.1?

En bref: n'utilisez pas attr () mais prop () pour vérifier les boutons radio. Dieu que je déteste JS ...

30
M.G.Palmer

La solution de contournement JavaScript ultime à ce problème ennuyeux -

Enroulez simplement la commande jQuery dans un setTimeout. L'intervalle peut être extrêmement petit, j'utilise 10 millisecondes et il semble bien fonctionner. Le délai est si faible qu'il est pratiquement indétectable pour les utilisateurs finaux.

setTimeout(function(){
  $("#radio-element").attr('checked','checked');
},10);

Cela fonctionnera également avec

  • $("#radio-element").trigger('click');
  • $("#radio-element").attr('checked',true);
  • $("#radio-element").attr('checked',ANYTHING_THAT_IS_NOT_FALSE);

Hacky ... hacky ... hacky ... hacky ... Oui je sais ... c'est donc une solution de contournement ....

11
Lix

Les entrées radio doivent être à l'intérieur d'un formulaire pour que "coché" fonctionne.

10
Michael Seltenreich

Hé, je faisais également face à un problème similaire, dans une page générée avec ajax. J'ai pris le source généré à l'aide de Webdeveloper pluggin dans FF, et vérifié toutes les entrées du formulaire et découvert qu'il y avait une autre case à cocher à l'intérieur d'un div masqué (display: none) avec le même identifiant, une fois que j'ai changé l'identifiant de la deuxième case à cocher, cela a commencé à fonctionner .. Vous pouvez également essayer cela .. et laissez-moi savoir le résultat .. à la vôtre

5
Codemator

Il suffit de copier votre code dans: http://jsfiddle.net/fY4F9/

Non est coché par défaut. Avez-vous un javascript en cours qui aurait un effet sur la radio?

3
Ben Rowe

salut je pense que si vous mettez attribut id pour la deuxième entrée et lui donnez une valeur unique id cela fonctionnera

<label>Do you want to accept American Express?</label>
Yes<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress'   value='1'/>  
No<input style="width: 20px;" id="amex0" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked"/>
1
mentes

La documentation de jQuery fournit une explication détaillée de la propriété checked contre attribut .

En conséquence, voici un autre moyen de récupérer la valeur du bouton radio sélectionné

var accepted = $('input[name="Contact0_AmericanExpress"]:checked').val();
0
Sudhir

Votre code est correct, essayez de déboguer votre script JQuery pour trouver le problème! Si vous utilisez FF, vous pouvez installer une extension pour déboguer JS (et JQuery) qui s’appelle FireBug.

0
thePanz

Je pourrais le reproduire en définissant le nom de la balise input de la même manière pour deux groupes d'entrées, comme ci-dessous:

<body>
  <div>
      <div>
        <h3>Header1</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_1" value="male"> Male<br>
          <input type="radio" name="gender" id="female_1" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>


  <div>
      <div>
        <h3>Header2</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_2" value="male"> Male<br>
          <input type="radio" name="gender" id="female_2" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>
</body>

(Pour voir cela en cours d'exécution, cliquez sur ici )

Les deux solutions suivantes résolvent le problème:

  1. Utilisez des noms différents pour les entrées du deuxième groupe
  2. Utilisez la balise form au lieu de la balise div pour l'un des groupes (vous ne pouvez pas vraiment comprendre la vraie raison pour laquelle cela résoudrait le problème. J'aimerais entendre des opinions à ce sujet!)
0
Liutong Chen

**Radio button aria-checked: true or false one at a time**

$('input:radio[name=anynameofinput]').change(function() {
            if (this.value === 'value1') {
                $("#id1").attr("aria-checked","true");
                $("#id2").attr("aria-checked","false");
            }
            else if (this.value === 'value2') {;
                $("#id2").attr("aria-checked","true");
                $("#id1").attr("aria-checked","false");
            }
   });

0
user11097803