wake-up-neo.com

So setzen Sie die Optionsfelder in jQuery zurück, sodass keine markiert ist

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 ist ein Form-Tag, und wenn der Benutzer ein Formular übergibt, möchte ich, dass alle Optionsfelder auf die Standardeinstellung zurückgesetzt werden. Bedeutet, dass keiner von ihnen geprüft wurde.

Ich habe diesen Code, aber es gibt einen Fehler, der [0] is null or not an object sagt

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

127
roy

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 Hinweis 2 unten).

Anmerkung 1: Es ist wichtig, dass das zweite Argument false und nicht "false" ist, da "false" kein falscher Wert ist. d.h. 

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

Note 2: Ab jQuery 1.6.0 gibt es jetzt zwei ähnliche Methoden, .attr und .prop, die zwei verwandte, aber etwas unterschiedliche Dinge tun. Wenn in diesem speziellen Fall der oben genannte Hinweis gilt, wenn Sie 1.6.1 oder höher 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 wünschen, lesen Sie weiter.

Details: Bei der Arbeit mit geraden HTML-DOM-Elementen gibt es Eigenschaften, die an das DOM-Element (checked, type, value usw.) angehängt sind und eine Schnittstelle zum Ausführungsstatus der HTML-Seite bieten. Es gibt auch die .getAttribute/.setAttribute-Schnittstelle, die den Zugriff auf die HTML-Attributwerte ermöglicht, wie im HTML-Code angegeben. Vor 1.6 verwischte jQuery die Unterscheidung, indem es eine Methode, .attr, zur Verfügung stellte, um auf beide Wertetypen zuzugreifen. jQuery 1.6+ stellt zwei Methoden zur Verfügung, .attr und .prop, um zwischen diesen Situationen zu unterscheiden.

Mit .prop können Sie eine Eigenschaft für ein DOM-Element festlegen. Mit .attr können Sie einen HTML-Attributwert festlegen. Wenn Sie mit normalem DOM arbeiten und die geprüfte Eigenschaft elem.checked auf true oder false setzen, ändern Sie den laufenden Wert (den Benutzer sehen) und der zurückgegebene Wert verfolgt den Status der Seite. elem.getAttribute('checked') gibt jedoch nur den Anfangsstatus zurück (und gibt 'checked' oder undefined abhängig vom Anfangsstatus aus dem HTML-Code zurück). In 1.6.1+ führt die Verwendung von .attr('checked', false) sowohl elem.removeAttribute('checked') als auch elem.checked = false aus, da die Änderung zu zahlreichen Abwärtskompatibilitätsproblemen geführt 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 .

253
lambacck

Der beste Weg, um den Status der 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-Code (1.4+) zur Vorauswahl einer Schaltfläche:

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

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

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

So deaktivieren Sie die Schaltflächen:

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

Ihr Problem ist, dass der Attributselektor nicht mit einem @ beginnt.

Versuche dies:

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

Nach vielen Tests bin ich der Meinung, dass der bequemste und effizienteste Weg zum Voreinstellen 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 Wertes ist einfach:

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

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

Ich weiß, das ist alt und das ist ein wenig abwegiges Thema. Angenommen, Sie möchten 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">

Wenn Sie mit einer Radiobutton-Liste zu tun haben, können Sie mit dem:: -selektor genau die gewünschte auswählen.

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

Prop hat zwar den geprüften Status geändert, zeigt aber auch das im Formular an.

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

Optionsfeld gesetzt durch 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

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

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