Comment réinitialiser les boutons radio dans jQuery afin qu'aucun ne soit vérifié

J'ai des boutons radio en HTML 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>

Ceci est dans une balise de formulaire, et lorsque l'utilisateur soumet un formulaire, je veux rétablir tous les boutons radio par défaut. Ce qui signifie qu'aucun d'entre eux n'est vérifié.

J'ai ce code mais il donne une erreur disant [0] is null or not an object

$('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 dans IE 6.

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

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

Dans les versions de jQuery après 1.6, vous devez utiliser:

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

mais si vous utilisez 1.6.1+, vous pouvez utiliser le premier formulaire (voir note 2 ci-dessous).

Note 1: il est important que le deuxième argument soit faux et non "faux" car "faux" n'est pas une valeur falsifiée. c'est à dire

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

Remarque 2: Depuis jQuery 1.6.0, il existe maintenant deux méthodes similaires, .attret .propqui font deux choses liées mais légèrement différentes. Si dans ce cas particulier, les conseils ci-dessus fonctionnent si vous utilisez 1.6.1+. Ce qui précède ne fonctionnera pas avec 1.6.0, si vous utilisez 1.6.0, vous devez mettre à jour. Si vous voulez les détails, continuez à lire.

Détails: Lorsque vous travaillez avec des éléments DOM HTML droite, il y a des propriétés attachées à l'élément DOM ( checked, type, value, etc.) qui fournissent une interface à l'état de fonctionnement de la page HTML. Il existe également l' interface .getAttribute/ .setAttributequi permet d'accéder aux valeurs d'attribut HTML telles que fournies dans le HTML. Avant la version 1.6, jQuery brouillait la distinction en fournissant une méthode,, .attrpour accéder aux deux types de valeurs. jQuery 1.6+ fournit deux méthodes .attret permet .propde faire la distinction entre ces situations.

.propvous permet de définir une propriété sur un élément DOM, tandis que .attrvous permet de définir une valeur d'attribut HTML. Si vous travaillez avec un DOM simple et que vous définissez la propriété vérifiée,, elem.checkedsur trueou falsevous modifiez la valeur en cours d'exécution (ce que voit l'utilisateur) et la valeur renvoyée suit l'état de la page. elem.getAttribute('checked')cependant ne renvoie que l'état initial (et renvoie 'checked'ou undefinedselon l'état initial du HTML). Dans la version 1.6.1+, l'utilisation .attr('checked', false)fait les deux elem.removeAttribute('checked')et elem.checked = falsepuisque le changement a causé beaucoup de problèmes de compatibilité descendante et il ne peut pas vraiment dire si vous vouliez définir l'attribut HTML ou la propriété DOM. Pour plus d'informations, consultez la documentation de .prop .

La meilleure façon de définir l'état des boutons radio dans 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");

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

Essaye ça:

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

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

Or

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

Enfin, après de nombreux tests, je pense que le moyen le plus pratique et le 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

L'actualisation est requise avec l'objet JQueryUI.

Récupérer la valeur est simple:

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

Testé avec JQuery 1.6.1, JQuery UI 1.8.

Je sais que c'est vieux et que c'est un peu hors sujet, mais en supposant que vous vouliez décocher uniquement des boutons radio spécifiques dans une collection:

$("#go").click(function(){
    $("input[name='correctAnswer']").each(function(){
      if($(this).val() !== "1"){
        $(this).prop("checked",false);
      }
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
<input type="button" id="go" value="go">

Et si vous avez affaire à une liste de boutons radio, vous pouvez utiliser le sélecteur: vérifié pour obtenir celui que vous voulez.

$("#go").click(function(){
  $("input[name='correctAnswer']:checked").prop("checked",false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
<input type="button" id="go" value="go">

Jeu de boutons radio vérifié via jquery:

<div id="somediv" >
 <input type="radio" name="enddate" value="1"  />
 <input type="radio" name="enddate" value="2"  />
 <input type="radio" name="enddate" value="3"  />
</div>

code jquery:

$('div#somediv input:radio:nth(0)').attr("checked","checked");

Si vous souhaitez effacer tous les boutons radio dans le DOM:

$('input[type=radio]').prop('checked',false);

<div id="radio">
<input type="radio" id="radio1" name="radio"/><label for="radio1">Bar Chart</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Pie Chart</label>
<input type="radio" id="radio3" name="radio"/><label for="radio3">Datapoint Chart</label>
</div>

$('#radio input').removeAttr('checked');
// Refresh the jQuery UI buttonset.                  
$( "#radio" ).buttonset('refresh');

Bien que prop ait changé le statut vérifié, le changement le montre également dans le formulaire.

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

Où vous avez: <input type="radio" name="enddate" value="1" />

Après value = "1", vous pouvez également simplement ajouter unchecked =" false" />

La ligne sera alors:

<input type="radio" name="enddate" value="1" unchecked =" false" />

Réglez tous les boutons radio sur la valeur par défaut:

$("input[name='correctAnswer']").checkboxradio( "refresh" );

Pourquoi tu ne fais pas:

$("#radio1, #radio2, #radio3, #radio4").checked = false;