Comment réinitialiser les boutons radio en jQuery pour qu'aucun ne soit coché ?

Question

J'ai des boutons radio comme ceci

<td>
    <input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
    <input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
    <input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
    <input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
</td>

Il s'agit d'un formulaire et lorsque l'utilisateur soumet un formulaire, je veux que tous les boutons radio reviennent à leur valeur par défaut. C'est-à-dire qu'aucun d'entre eux ne soit coché.

J'ai ce code mais il donne une erreur disant que [0] est nul ou n'est pas un objet.

$('input[@name="correctAnswer"]')[0].checked = false;
$('input[@name="correctAnswer"]')[1].checked = false;
$('input[@name="correctAnswer"]')[2].checked = false;
$('input[@name="correctAnswer"]')[3].checked = false;

Je fais cela pour IE 6.

Answer 1

Dans les versions de jQuery antérieures à 1.6, utilisez :

$('input[name="correctAnswer"]').attr('checked', false);

Dans les versions de jQuery postérieures à 1.6, vous devez utiliser :

$('input[name="correctAnswer"]').prop('checked', false);

mais si vous utilisez la version 1.6.1+, vous pouvez utiliser la première forme (voir la note 2 ci-dessous).

Note 1 : il est important que le second argument soit faux et non "faux" depuis "faux" n'est pas une valeur falsy, c'est-à-dire que

if ("false") {
    alert("Truthy value. You will see an alert");
}

Note 2 : Depuis la version 1.6.0 de jQuery, il existe désormais deux méthodes similaires, .attr et .prop qui font deux choses liées mais légèrement différentes. Dans ce cas particulier, les conseils fournis ci-dessus fonctionnent si vous utilisez la version 1.6.1+. Les conseils ci-dessus ne fonctionneront pas avec la version 1.6.0. Si vous utilisez la version 1.6.0, vous devez effectuer une mise à niveau. Si vous voulez les détails, continuez à lire.

Détails : Lorsque l'on travaille avec des éléments DOM HTML simples, il existe des propriétés attachées à l'élément DOM ( checked , type , value etc.) qui fournissent une interface avec l'état de fonctionnement de la page HTML. Il y a aussi le .getAttribute / .setAttribute qui permet d'accéder aux valeurs des attributs HTML tels qu'ils sont fournis dans le HTML. Avant la version 1.6, jQuery a brouillé la distinction en fournissant une méthode, .attr pour accéder aux deux types de valeurs. jQuery 1.6+ fournit deux méthodes, .attr et .prop pour faire la distinction entre ces situations.

.prop vous permet de définir une propriété sur un élément du DOM, alors que .attr vous permet de définir la valeur d'un attribut HTML. Si vous travaillez avec un DOM simple et que vous définissez la propriété checked, elem.checked à true ou false vous modifiez la valeur courante (ce que l'utilisateur voit) et la valeur renvoyée suit l'état de la page. elem.getAttribute('checked') ne renvoie cependant que l'état initial (et renvoie 'checked' ou undefined en fonction de l'état initial du HTML). Dans les versions 1.6.1+, l'utilisation de .attr('checked', false) fait les deux elem.removeAttribute('checked') et elem.checked = false car ce changement a causé de nombreux problèmes de rétrocompatibilité et il ne peut pas vraiment dire si vous vouliez définir l'attribut HTML ou la propriété DOM. Voir plus d'informations dans le documentation pour .prop .

Answer 2

La meilleure façon de définir l'état des boutons radios en jquery :

HTML :

<input type="radio" name="color" value="orange" /> Orange 
<input type="radio" name="color" value="pink" /> Pink 
<input type="radio" name="color" value="black" /> Black
<input type="radio" name="color" value="pinkish purple" /> Pinkish Purple

Code Jquery (1.4+) pour présélectionner un bouton :

var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").attr("checked","checked");

Dans le code Jquery 1.6+, la méthode .prop() est préférée :

var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").prop("checked",true);

Pour désélectionner les boutons :

$("[name=color]").removeAttr("checked");

Answer 3

Votre problème est que le sélecteur d'attribut ne commence pas par un @ .

Essayez ça :

$('input[name="correctAnswer"]').attr('checked', false);

Answer 4

$('#radio1').removeAttr('checked');
$('#radio2').removeAttr('checked');
$('#radio3').removeAttr('checked');
$('#radio4').removeAttr('checked');

Or

$('input[name="correctAnswer"]').removeAttr('checked');

Answer 5

Finalement, après de nombreux tests, je pense que la façon la plus pratique et la plus efficace de prérégler est :

var presetValue = "black";
$("input[name=correctAnswer]").filter("[value=" + presetValue + "]").prop("checked",true);
$("input[name=correctAnswer]").button( "refresh" );//JQuery UI only

Le rafraîchissement est nécessaire avec l'objet JQueryUI.

La récupération de la valeur est facile :

alert($('input[name=correctAnswer]:checked').val())

Testé avec JQuery 1.6.1, JQuery UI 1.8.