jQuery set radyo düğmesi


134

Bir radyo düğmesi ayarlamaya çalışıyorum. Ben değeri veya kimliği kullanarak ayarlamak istiyorum.

Ben de bunu denedim.

$('input:radio[name=cols]'+" #"+newcol).attr('checked',true);

newcol radyo düğmesinin kimliğidir.

Belki de küçük bir düzenleme yapılabilir.

Biri bobinli, diğeri sıralı iki radyo kutusu seti vardır. Bu yüzden id kullanmama noktasını görüyorum. Benim hatam. Yani bir örnek var:

<input type="radio" name="rows" class="listOfCols" 
   style="width: 50%; " value="Site"></input>

ve

<input type="radio" name="cols" class="listOfCols" 
   style="width: 50%; "  value="Site"></input>

kimliği kaldırıldı ve doğru olanı ayarlamam gerekiyor.


Yanıtlar:


196

Seçiciniz input:radio[name=cols]kimliğine sahip bir öğenin torununu arar newcol(bu değişkenin değeri).

Bunun yerine bunu deneyin (zaten kimliğe göre seçim yaptığınızdan):

$('#' + newcol).prop('checked',true);

İşte bir demo: http://jsfiddle.net/jasper/n8CdM/1/

Ayrıca, jQuery 1.6'dan itibaren bir mülkü değiştirmenin tercih edilen yöntemi .prop(): http://api.jquery.com/prop


5
propVs için +1 attr. attrözellikleri için kullanımdan kaldırılmıştır ve artık jQuery 2.0'da çalışmamaktadır))
gavenkoa

87

Cevabı burada buldum:
https://web.archive.org/web/20160421163524/http://vijayt.com/Post/Set-RadioButton-value-using-jQuery

Temel olarak, bir radyo düğmesini kontrol etmek istiyorsanız, değeri bir dizi olarak geçirmeniz GEREKİR:

$('input:radio[name=cols]').val(['Site']);
$('input:radio[name=rows]').val(['Site']);

Merhaba Bu Bağlantıda önerilen içerik yok. Neden bağlantıyı kaldırmak için düzenlememi reddediyorsunuz? Konuyla ilgili hiçbir şey içermiyor.
Menuka Ishan

@MenukaIshan, asıl nokta: Kredi verin. Bağlantı web.archive.org adresinde mevcuttur ve ilk kez yazan ve cevap fikrini kimden aldığım adamın kredisini alması gerekir. Bağlantıyı kaldırmayın ve orijinal yayını görmek istiyorsanız, bağlantıyı kopyalayıp yapıştırın (neden web.archive.org yerine eski sayfaya gideceğini bilmiyorum)
Chococroc

2
@Chococroc Sorunun İşaretlenmesini doğru şekilde yapılandırmadınız. Web arşiv sürümünü gördüm ve doğru şekilde bağladım. İncelemeden Sonra Siteye doğru bir şekilde bağlanacaktır.
Menuka Ishan


15

Seçicinizde, radyo düğmenizin iç içe geçmiş bir öğesini belirli bir kimliğe getirmeye çalışıyorsunuz. Bir radyo düğmesini kontrol etmek istiyorsanız, seçicideki bu radyo düğmesini seçmeli, başka bir şey seçmemelisiniz:

$('input:radio[name="cols"]').attr('checked', 'checked');

Bu, işaretlemenizde aşağıdaki radyo düğmesinin bulunduğunu varsayar:

<input type="radio" name="cols" value="1" />

Radyo düğmenizde bir kimlik varsa:

<input type="radio" name="cols" value="1" id="myradio" />

doğrudan bir kimlik seçici kullanabilirsiniz:

$('#myradio').attr('checked', 'checked');

colsİsme sahip birden fazla radyo varsa, $('input:radio[name="cols"]').attr('checked', 'checked');sadece sonuncuyu seçecektir. Kodu her birinde çalıştıracaktır, ancak özelliği her ayarladığınızda checked, önceden ayarlanan öğe ayarlanamaz. İşte bir demo: jsfiddle.net/jasper/n8CdM/2
Jasper

@Jasper, evet, bu doğru. Bu yüzden bir kimlik seçici kullanmanızı önerdim.
Darin Dimitrov

12

Aşağıdaki kodu deneyebilirsiniz:

$("input[name=cols][value=" + value + "]").attr('checked', 'checked');

Bu, radyo sütunları için kontrol edilen özniteliği ve değeri belirtildiği gibi ayarlar.


1
...the most important concept to remember about the checked attribute is that it does not correspond to the checked property.Kaynak: api.jquery.com/attr
Jasper

10

Neden ihtiyacın var 'input:radio[name=cols]'. Html'nizi bilmiyorum, ancak kimliklerin benzersiz olduğunu varsayarsak, bunu yapabilirsiniz.

$('#'+newcol).prop('checked', true);

6

Bunu dene:

$("#" + newcol).attr("checked", "checked");

İle ilgili sorunlar yaşadım attr("checked", true) , bu yüzden yukarıdakileri kullanma eğilimindeyim.

Ayrıca, kimliğiniz varsa, seçim için başka şeylere ihtiyacınız yoktur. Kimlik benzersizdir.


1
prop böyle şeyler için attr daha iyidir
RozzA

attr jQuery 1.9+ gitti prop kullanın.
Mike_Laird

Haklısın, ama nihayetinde sizin durumunuza bağlı. Kodunuz her zaman jQuery 1.6+ ile çalışacaksa, prop yoludur. Ancak kodunuz eski sürümlerde çalışıyorsa, çözüm o kadar basit değildir. Örneğin, jQuery PickList eklentisini koruyorum ve jQuery 1.4+'yi destekliyoruz, bu yüzden sadece prop kullanmak bir seçenek değil. Bu açık bir bilet, bu yüzden herhangi bir zarif öneriniz varsa onları duymak isterim; Henüz araştırmam için yeterli zamanım olmadı.
Awnry Ayı

Sorun şu ki, çözümünüz daha geriye dönük uyumlu olsa bile, bu durumda işe yaramaz: A'yı seçin, yeni bir checked="checked"özellik alacak ve tarayıcı bunu işaretli olarak gösterecek, sonra B'yi seçecek ve aynı şey olacaktır. Şimdi A'yı tekrar seçtiğinizde zaten bir checked="checked"niteliği olacaktır ve hiçbir şey değişmeyecektir. Bu B'nin bir yan etkisi olarak A değil, yine de seçilecektir
Kyborek

2

Yana newcolradyo düğmesi kimliğidir, Sadece aşağıdaki gibi kullanabilirsiniz.

$("#"+newcol).attr('checked',true);

2

Kullanmak .filter()da çalışır ve kimlik, değer, ad için esnektir:

$('input[name="cols"]').filter("[value='Site']").attr('checked', true);

( bu blogda görüldü )


1
Bunun eşit derecede geçerli bir cevap olduğuna inanıyorum, ancak prop () yöntemini kullanmalıdır: $ ('input [name = "cols"]'). Filter ("[value = 'Site']"). Prop ('işaretli ', doğru);. Kullanıcı "değer veya id" ile ayarlamak istiyor. Her radyo seçeneği için kimlik değerleri ayarlamak istemediğiniz zamanlar olabilir, bu nedenle ada göre almak ve değere göre filtrelemek yararlıdır.
Zac Imboden

2

Önceki cevapları birleştirmek:

$('input[name="cols"]').filter("[value='Site']").click();

0

Sadece şunu kullanabilirsiniz:

$("input[name='cols']").click();

0

Seçilen cevap bu durumda çalışır.

Ancak soru, radyo grubuna ve dinamik kimliğe dayalı öğeyi bulmakla ilgiliydi ve cevap, görüntülenen radyo düğmesini de etkilenmeden bırakabilir.

Bu satır, değişikliği ekranda gösterirken tam olarak ne istediğini de seçer.

$('input:radio[name=cols][id='+ newcol +']').click();
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.