web-dev-qa-db-fra.com

Comment réinitialiser les boutons radio dans jQuery afin que rien ne soit coché

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>

Cela se trouve dans une balise de formulaire et lorsque l'utilisateur soumet un formulaire, je souhaite rétablir tous les boutons radio par défaut. Cela signifie qu'aucun d'entre eux n'a été vérifié.

J'ai ce code mais il y a une erreur qui dit [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 le fais dans IE 6.

jqueryhtml-form
127
roy

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 1.6.1+, vous pouvez utiliser le premier formulaire (voir la note 2 ci-dessous).

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

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

Note 2: Depuis jQuery 1.6.0, il existe maintenant deux méthodes similaires, .attr et .prop, qui effectuent deux opérations liées mais légèrement différentes. Si dans ce cas particulier, les conseils fournis 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 effectuer une mise à niveau. Si vous voulez les détails, continuez à lire.

Détails: Lorsque vous utilisez des éléments DOM droits HTML, des propriétés attachées à l'élément DOM (checked, type, value, etc.) fournissent une interface à l'état d'exécution de la page HTML. Il existe également l'interface .getAttribute/.setAttribute qui permet d'accéder aux valeurs d'attribut HTML fournies dans le code HTML. Avant 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 distinguer ces situations.

.prop vous permet de définir une propriété sur un élément DOM, tandis que .attr vous permet de définir une valeur d'attribut HTML. Si vous utilisez plain DOM et définissez la propriété vérifiée, elem.checked, sur true ou false, vous 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 undefined en fonction de l'état initial du code HTML). Dans la version 1.6.1+, .attr('checked', false) utilise à la fois elem.removeAttribute('checked') et elem.checked = false car la modification a causé de nombreux problèmes de compatibilité avec les versions antérieures et ne permet pas de savoir si vous souhaitez définir l'attribut HTML ou la propriété DOM. Voir plus d’informations dans documentation pour .prop .

253
lambacck

La meilleure façon de définir l'état des radiobuttons 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

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

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

Dans Jquery 1.6+ code, 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");
52
Benjk

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

Essaye ça:

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

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

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

Testé avec JQuery 1.6.1, JQuery UI 1.8.

4
vv-reflex
$('#radio1').removeAttr('checked');
$('#radio2').removeAttr('checked');
$('#radio3').removeAttr('checked');
$('#radio4').removeAttr('checked');

Or

$('input[name="correctAnswer"]').removeAttr('checked');
4
Waqas Ali Khan Puar

Je sais que c'est vieux et que c'est un peu hors sujet, mais supposons que vous vouliez décocher seulement les boutons radio spécifiques d'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 traitez avec une liste de radiobutton, vous pouvez utiliser le sélecteur: selected 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">
2
Nielsvh

Bien que prop ait changé le statut coché mais le changement l'a également montré dans le formulaire.

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

Ensemble de boutons radio vérifiés 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>

jquery code:

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

Si vous souhaitez effacer tous les boutons radio du DOM:

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

0
elzaer
<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');
0
Lakshmana Kumar D