Jak zresetować radiobuttons w jQuery, aby żaden nie był zaznaczony

Mam przyciski radiowe w HTML w ten sposób:

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

Znajduje się w tagu formularza, a gdy użytkownik przesyła formularz, chcę przywrócić domyślne ustawienia wszystkich przycisków opcji. To znaczy, że żaden z nich nie sprawdził.

Mam ten kod, ale wyświetla błąd mówiąc [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;

Robię to w IE 6.

W wersjach jQuery przed 1.6 użycia:

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

W wersjach jQuery po 1.6 powinieneś używać:

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

ale jeśli używasz wersji 1.6.1+, możesz użyć pierwszego formularza (patrz uwaga 2 poniżej).

Uwaga 1: ważne jest, aby drugi argument był fałszywy, a nie „fałsz”, ponieważ „fałsz” nie jest wartością fałszywą. to znaczy

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

Uwaga 2: W jQuery 1.6.0, istnieją obecnie dwa podobne metody, .attra .propktóre robią dwa podobne, ale nieco różne rzeczy. Jeśli w tym konkretnym przypadku powyższa rada zadziała, jeśli używasz wersji 1.6.1+. Powyższe nie będzie działać z 1.6.0, jeśli używasz 1.6.0, powinieneś zaktualizować. Jeśli chcesz poznać szczegóły, czytaj dalej.

Szczegóły: Podczas pracy z prostych elementów HTML DOM, istnieją właściwości związane z elementu DOM ( checked, type, value, etc), które stanowią interfejs do uruchomionego stanu strony HTML. Istnieje również interfejs .getAttribute/ .setAttribute, który zapewnia dostęp do wartości atrybutów HTML, jak podano w kodzie HTML. Przed wersją 1.6 jQuery zatarło to rozróżnienie, udostępniając jedną metodę .attr, aby uzyskać dostęp do obu typów wartości. jQuery 1.6+ udostępnia dwie metody .attri .propumożliwia rozróżnienie między tymi sytuacjami.

.propumożliwia ustawienie właściwości elementu DOM, a jednocześnie .attrumożliwia ustawienie wartości atrybutu HTML. Jeśli pracujesz ze zwykłym DOM i ustawiasz sprawdzoną właściwość elem.checkedna truelub falsezmieniasz bieżącą wartość (co widzi użytkownik), a zwrócona wartość śledzi stan na stronie. elem.getAttribute('checked')jednak zwraca tylko stan początkowy (i zwraca 'checked'lub w undefinedzależności od stanu początkowego z HTML). W wersji 1.6.1+ używanie .attr('checked', false)robi jedno elem.removeAttribute('checked')i drugie, a elem.checked = falseponieważ zmiana spowodowała wiele problemów ze zgodnością wsteczną i nie jest w stanie stwierdzić, czy chcesz ustawić atrybut HTML, czy właściwość DOM. Zobacz więcej informacji w dokumentacji .prop .

Najlepszy sposób na ustawienie stanu radiobuttons w 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

Kod JQuery (1.4+) do wstępnego wyboru jednego przycisku:

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

W kodzie Jquery 1.6+ preferowana jest metoda .prop ():

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

Aby odznaczyć przyciski:

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

Twój problem polega na tym, że selektor atrybutu nie zaczyna się od @.

Spróbuj tego:

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

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

Or

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

Wreszcie po wielu testach myślę, że najwygodniejszym i najskuteczniejszym sposobem na ustawienie wstępne jest:

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

Odświeżanie jest wymagane w przypadku obiektu JQueryUI.

Pobieranie wartości jest łatwe:

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

Testowane z JQuery 1.6.1, JQuery UI 1.8.

Wiem, że to jest stare i trochę nie na temat, ale przypuśćmy, że chcesz odznaczyć tylko określone przyciski opcji w kolekcji:

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

A jeśli masz do czynienia z listą radiobutton, możesz użyć selektora: selected, aby uzyskać tylko ten, który chcesz.

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

Zestaw przycisków radiowych sprawdzony przez 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>

kod jQuery:

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

Jeśli chcesz wyczyścić wszystkie przyciski opcji w 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');

Chociaż prop zmienił stan zaznaczenia, ale zmiana również pokazuje to w formularzu.

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

Gdzie masz: <input type="radio" name="enddate" value="1" />

Po wartości = „1” możesz również po prostu dodać unchecked =" false" />

Linia będzie wtedy:

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

Przywróć domyślne ustawienia wszystkich przycisków opcji:

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

Dlaczego nie robisz:

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