Hiçbiri işaretlenmeyecek şekilde jQuery'deki radyo düğmeleri nasıl sıfırlanır

HTML gibi radyo düğmeleri şöyle:

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

Bu bir form etiketindedir ve kullanıcı bir form gönderdiğinde, tüm radyo düğmelerini varsayılana geri döndürmek istiyorum. Yani hiçbiri kontrol etmedi.

Bu kod var ama söyleyerek bir hata veriyor [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;

Bunu IE 6'da yapıyorum.

1.6'dan önceki jQuery sürümlerinde:

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

1.6'dan sonraki jQuery sürümlerinde:

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

ancak 1.6.1+ sürümünü kullanıyorsanız ilk formu kullanabilirsiniz (aşağıdaki not 2'ye bakın).

Not 1: İkinci argümanın false olması ve "false" olmaması önemlidir, çünkü "false" bir falsy değeri değildir. yani

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

Not 2: jQuery 1.6.0'dan itibaren, şimdi iki benzer yöntem vardır .attrve .propbunlar birbiriyle ilişkili ancak biraz farklı şeyler yapar. Bu özel durumda, 1.6.1+ kullanıyorsanız yukarıdaki tavsiyeler işe yarar. Yukarıdaki 1.6.0 ile çalışmaz, 1.6.0 kullanıyorsanız, yükseltmelisiniz. Ayrıntıları istiyorsanız, okumaya devam edin.

Detaylar: Düz HTML DOM elemanları ile çalışırken, DOM öğesine (ekli özellikleri vardır checked, type, valueHTML sayfasının çalışan durumuna arayüz sağlayan, vs). HTML'de sağlanan HTML Özniteliği değerlerine erişim sağlayan .getAttribute/ .setAttributearabirimi de vardır . 1.6'dan önce jQuery .attr, her iki değer türüne erişmek için bir yöntem sağlayarak ayrımı bulanıklaştırmıştır . jQuery 1.6+ iki yöntem sunar .attrve .propbu durumları ayırt etmek.

.propbir DOM öğesi üzerinde bir özellik ayarlamanızı sağlarken .attr, bir HTML özellik değeri ayarlamanızı sağlar. Düz DOM ve set kontrol özelliği ile çalışıyorsanız, elem.checkede trueveya falseçalıştırmakta değeri (kullanıcının gördüğü) ve sayfa durumuna değeri döndürülür değişiklik izler. elem.getAttribute('checked')ancak yalnızca başlangıç ​​durumunu döndürür (ve HTML'deki başlangıç ​​durumuna göre döner 'checked'veya döndürür undefined). 1.6.1+ sürümünde .attr('checked', false)her ikisi de kullanılır elem.removeAttribute('checked')ve elem.checked = falsedeğişiklik çok fazla geriye dönük uyumluluk sorununa neden olduğundan ve HTML özelliğini mi yoksa DOM özelliğini mi ayarlamak istediğinizi gerçekten anlayamaz. .Prop belgelerinde daha fazla bilgi bulabilirsiniz .

Radyo düğmelerinin durumunu jquery'de ayarlamanın en iyi yolu:

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

Bir düğmeyi önceden seçmek için jquery (1.4+) kodu:

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

Jquery 1.6+ kodunda .prop () yöntemi tercih edilir:

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

Düğmelerin seçimini kaldırmak için:

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

Sorununuz, öznitelik seçicinin bir ile başlamamasıdır @.

Bunu dene:

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

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

Or

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

Son olarak, birçok testten sonra, ön ayar yapmanın en uygun ve verimli yolunun bence:

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

Yenileme, JQueryUI nesnesiyle gereklidir.

Değeri almak kolaydır:

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

JQuery 1.6.1, JQuery UI 1.8 ile test edilmiştir.

Bunun eski olduğunu ve bunun biraz konu dışı olduğunu biliyorum, ancak bir koleksiyondaki yalnızca belirli radyo düğmelerinin işaretini kaldırmak istediğinizi varsayalım:

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

Ve bir radyo düğmesi listesiyle uğraşıyorsanız, sadece istediğinizi almak için: işaretli seçiciyi kullanabilirsiniz.

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

Radyo düğmesi seti jquery ile kontrol edildi:

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

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

DOM'daki tüm radyo düğmelerini silmek istiyorsanız:

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

Her ne kadar prop kontrol edilen durumu değiştirse de değişiklik bunu formda da gösterir.

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

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

Value = "1" den sonra, unchecked =" false" />

Hat daha sonra şöyle olacaktır:

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

Tüm radyo düğmelerini varsayılana geri ayarlayın:

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

Neden yapmıyorsun:

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