So setzen Sie Radiobuttons in jQuery zurück, damit keine aktiviert werden

Ich habe Optionsfelder in HTML wie folgt:

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

Dies befindet sich in einem Formular-Tag. Wenn der Benutzer ein Formular sendet, möchte ich alle Optionsfelder auf den Standardwert zurücksetzen. Das heißt, keiner von ihnen wurde überprüft.

Ich habe diesen Code, aber er gibt einen Fehler aus [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;

Ich mache das in IE 6.

In Versionen von jQuery vor 1.6 verwenden Sie:

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

In jQuery-Versionen nach 1.6 sollten Sie Folgendes verwenden:

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

Wenn Sie jedoch 1.6.1+ verwenden, können Sie das erste Formular verwenden (siehe Anmerkung 2 unten).

Anmerkung 1: Es ist wichtig, dass das zweite Argument falsch und nicht "falsch" ist. da "falsch" kein falscher Wert ist. dh

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

Anmerkung 2: Ab jQuery 1.6.0, gibt es nun zwei ähnliche Verfahren, .attrund .propdas tun zwei verwandte , aber etwas andere Dinge. Wenn in diesem speziellen Fall die oben genannten Hinweise funktionieren, wenn Sie 1.6.1+ verwenden. Das Obige funktioniert nicht mit 1.6.0. Wenn Sie 1.6.0 verwenden, sollten Sie ein Upgrade durchführen. Wenn Sie die Details erfahren möchten, lesen Sie weiter.

Details: Wenn mit geraden HTML DOM - Elementen arbeiten, gibt es Objekte, die das DOM - Element angebracht ( checked, type, value, usw.) , die eine Schnittstelle zum Betriebszustand der HTML - Seite zur Verfügung stellen. Es gibt auch die .getAttribute/.setAttribute -Schnittstelle, die den Zugriff auf die im HTML bereitgestellten HTML-Attributwerte ermöglicht. Vor 1.6 verwischte jQuery die Unterscheidung, indem eine Methode bereitgestellt wurde .attr, um auf beide Wertetypen zuzugreifen. jQuery 1.6 + bietet zwei Methoden, .attrund .propzwischen diesen Situationen zu unterscheiden zu bekommen.

.propMit dieser Option können Sie eine Eigenschaft für ein DOM-Element .attrfestlegen und einen HTML-Attributwert festlegen. Wenn Sie mit einfachen DOM und legen Sie die Eigenschaft checked arbeiten, elem.checkedan trueoder falseSie den laufenden Wert ändern (was der Benutzer sieht) und die zurückgegebene Wert Spuren , die auf Seite Zustand. elem.getAttribute('checked')Gibt jedoch nur den Anfangszustand zurück (und gibt 'checked'oder undefinedabhängig vom Anfangszustand aus dem HTML zurück). In 1.6.1+ bewirkt using .attr('checked', false)beides elem.removeAttribute('checked')und elem.checked = falseda die Änderung viele Abwärtskompatibilitätsprobleme verursacht hat und nicht wirklich erkennbar ist, ob Sie das HTML-Attribut oder die DOM-Eigenschaft festlegen möchten . Weitere Informationen finden Sie in der Dokumentation zu .prop .

Der beste Weg, um den Status von Radiobuttons in jquery festzulegen:

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 zur Vorauswahl einer Schaltfläche:

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

In Jquery 1.6+ Code wird die .prop () -Methode bevorzugt:

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

So heben Sie die Auswahl der Schaltflächen auf:

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

Ihr Problem ist, dass die Attributauswahl nicht mit a beginnt @.

Versuche dies:

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

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

Or

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

Nach vielen Tests denke ich, dass die bequemste und effizienteste Art der Voreinstellung Folgendes ist:

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

Die Aktualisierung ist für das JQueryUI-Objekt erforderlich.

Das Abrufen des Werts ist einfach:

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

Getestet mit JQuery 1.6.1, JQuery UI 1.8.

Ich weiß, dass dies alt ist und dass dies ein wenig vom Thema abweicht, aber angenommen, Sie wollten nur bestimmte Optionsfelder in einer Sammlung deaktivieren:

$("#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">

Und wenn Sie es mit einer Radiobutton-Liste zu tun haben, können Sie den Selektor: aktiviert verwenden, um genau die gewünschte zu erhalten.

$("#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">

Optionsfeldsatz durch jquery überprüft:

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

Abfragecode:

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

Wenn Sie alle Optionsfelder im DOM löschen möchten:

$('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');

Obwohl prop den geprüften Status geändert hat, zeigen Änderungen dies auch im Formular.

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

Wo du hast: <input type="radio" name="enddate" value="1" />

Nach value = "1" können Sie auch einfach hinzufügen unchecked =" false" />

Die Zeile lautet dann:

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

Setzen Sie alle Optionsfelder auf den Standardwert zurück:

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

Warum tust du nicht:

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