Cara mengatur ulang tombol radio di jQuery sehingga tidak ada yang dicentang

Saya memiliki tombol radio dalam HTML seperti ini:

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

Ini ada dalam tag formulir, dan ketika pengguna mengirimkan formulir, saya ingin membuat semua tombol radio kembali ke default. Artinya tidak ada yang diperiksa.

Saya memiliki kode ini tetapi memberikan kesalahan mengatakan [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;

Saya melakukan ini di IE 6.

Dalam versi jQuery sebelum 1.6 digunakan:

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

Dalam versi jQuery setelah 1.6, Anda harus menggunakan:

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

tetapi jika Anda menggunakan 1.6.1+ Anda dapat menggunakan formulir pertama (lihat catatan 2 di bawah).

Catatan 1: Penting bahwa argumen kedua salah dan bukan "salah" karena "salah" bukanlah nilai yang salah. yaitu

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

Catatan 2: Pada jQuery 1.6.0, sekarang ada dua metode serupa, .attrdan .propitu melakukan dua hal yang terkait tetapi sedikit berbeda. Jika dalam kasus khusus ini, saran yang diberikan di atas berfungsi jika Anda menggunakan 1.6.1+. Di atas tidak akan berfungsi dengan 1.6.0, jika Anda menggunakan 1.6.0, Anda harus meningkatkan. Jika Anda menginginkan detailnya, teruslah membaca.

Rincian: Ketika bekerja dengan elemen HTML DOM lurus, ada sifat yang melekat pada elemen DOM ( checked, type, value, dll) yang menyediakan sebuah antarmuka untuk negara berjalan dari halaman HTML. Ada juga .getAttribute/ .setAttributeinterface yang menyediakan akses ke nilai Atribut HTML seperti yang disediakan di HTML. Sebelum 1.6 jQuery mengaburkan perbedaan dengan menyediakan satu metode .attr,, untuk mengakses kedua jenis nilai. jQuery 1.6+ menyediakan dua metode, .attrdan .propuntuk membedakan antara situasi ini.

.propmemungkinkan Anda menyetel properti pada elemen DOM, sementara .attrmemungkinkan Anda menyetel nilai atribut HTML. Jika Anda bekerja dengan DOM biasa dan menyetel properti yang dicentang elem.checked,, ke trueatau falseAnda mengubah nilai yang berjalan (apa yang dilihat pengguna) dan nilai yang dikembalikan melacak status di laman. elem.getAttribute('checked')namun hanya mengembalikan status awal (dan mengembalikan 'checked'atau undefinedbergantung pada status awal dari HTML). Di 1.6.1+, penggunaan .attr('checked', false)melakukan keduanya elem.removeAttribute('checked')dan elem.checked = falsekarena perubahan tersebut menyebabkan banyak masalah kompatibilitas mundur dan tidak dapat benar-benar mengetahui apakah Anda ingin menyetel atribut HTML atau properti DOM. Lihat informasi lebih lanjut dalam dokumentasi untuk .prop .

Cara terbaik untuk menyetel status radiobuttons di 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

Kode Jquery (1.4+) untuk memilih satu tombol sebelumnya:

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

Dalam kode Jquery 1.6+, metode .prop () lebih disukai:

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

Untuk membatalkan pilihan tombol:

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

Masalah Anda adalah bahwa pemilih atribut tidak dimulai dengan @.

Coba ini:

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

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

Or

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

Akhirnya setelah banyak pengujian, menurut saya cara yang paling nyaman dan efisien untuk melakukan preset adalah:

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

Penyegaran diperlukan dengan objek JQueryUI.

Mengambil nilai itu mudah:

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

Diuji dengan JQuery 1.6.1, JQuery UI 1.8.

Saya tahu ini sudah tua dan ini sedikit di luar topik, tetapi Andaikan Anda ingin menghapus centang hanya tombol radio tertentu dalam koleksi:

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

Dan jika Anda berurusan dengan daftar tombol radio, Anda dapat menggunakan: check selector untuk mendapatkan yang Anda inginkan.

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

Set tombol radio diperiksa melalui 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>

kode jquery:

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

Jika Anda ingin menghapus semua tombol radio di 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');

Meskipun prop mengubah status yang dicentang tetapi perubahan juga menunjukkannya dalam bentuk.

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

Dimana Anda memiliki: <input type="radio" name="enddate" value="1" />

Setelah nilai = "1" Anda juga bisa menambahkan unchecked =" false" />

Garis tersebut kemudian akan menjadi:

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

Setel semua tombol radio kembali ke default:

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

Mengapa Anda tidak melakukannya:

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