Radyo düğmesi jQuery ile nasıl kontrol edilir?


889

Bir radyo düğmesini jQuery ile kontrol etmeye çalışıyorum. İşte benim kod:

<form>
    <div id='type'>
        <input type='radio' id='radio_1' name='type' value='1' />
        <input type='radio' id='radio_2' name='type' value='2' />
        <input type='radio' id='radio_3' name='type' value='3' /> 
    </div>
</form>

Ve JavaScript:

jQuery("#radio_1").attr('checked', true);

Çalışmıyor:

jQuery("input[value='1']").attr('checked', true);

Çalışmıyor:

jQuery('input:radio[name="type"]').filter('[value="1"]').attr('checked', true);

Çalışmıyor:

Başka bir fikrin var mı? Neyi kaçırıyorum?


1
Yanıtlarınız için teşekkürler! Sorunu buldum. Aslında bunu yapmanın ilk iki yolu çalışıyor. Buradaki nokta, 3 radyo düğmesi kümesini şu kodla bir düğme kümesine dönüştürmek için jqueryUI kullandım: jQuery ("# ​​type"). Buttonset (); ancak telsizi kontrol etmeden önce bu değişikliği yapmak radyo setini kırıyordu (nedenini bilmiyorum). Son olarak, radyoyu kontrol ettikten sonra düğme seti çağrısını yaptım ve kusursuz çalışıyor.
Alexis

$ ("İnput: radio [value = '2']"). Prop ('işaretlendi', doğru); link here freakyjolly.com/…
Code Spy

Yanıtlar:


1469

JQuery eşit veya üzeri (> =) 1.6 sürümleri için şunu kullanın:

$("#radio_1").prop("checked", true);

(<) 1.6'dan önceki sürümler için şunu kullanın:

$("#radio_1").attr('checked', 'checked');

İpucu: Daha sonra aramak click()veya change()radyo düğmesini de kullanmak isteyebilirsiniz . Daha fazla bilgi için yorumlara bakın.


80
JQuery 1.9 veya üstü sürümlerde bu çözüm çalışmaz. $ ("# Radio_1"). Prop ("işaretli", doğru); yerine.
installero

12
@Installero aslında prep1.6'dan beri doğrudur ve 1.9'dan beri gereklidir.
John Dvorak

43
.change()Sayfadaki diğer etkinlikleri tetiklemek için sonuna eklemek yararlıdır .
Foxinni

13
Bu cevabı .prop, doğru bir şekilde doğru cevap olacak şekilde ve .attryöntemi jQuery <1.6 için bir not olacak şekilde yeniden ayarlamak akıllıca olabilir .
Patrick

22
Radyo grubundaki diğer radyo düğmelerinin doğru şekilde güncellenmesini istiyorsanız$("#radio_1").prop("checked", true).trigger("click");
Paul LeBeau

256

Bunu dene.

Bu örnekte, girdi adı ve değeri ile hedefliyorum

$("input[name=background][value='some value']").prop("checked",true);

Bilmenizde fayda var: Çok kelimeli değer olması durumunda, kesme işaretleri nedeniyle de çalışır.


5
Bu muhtemelen en iyi yoldur, diğerleri beklendiği gibi çalışırken ikinci kez işe yaramaz hale gelme eğilimi vardır
Roy Toledo

Seçilebilen yalnızca bir tane olduğundan, $ ('input [name = "type"]: işaretli'). Val () 'in de hoş olduğunu öğrendim.
huggie

Lütfen detaylandırın. Genel fikir, adıyla ve isteğe bağlı olarak, değeriyle adreslenen bir radyo düğmesini kontrol etmektir. Sadece name özniteliği ve: check pseudo selector kullanıldığından, bununla ne yapmaya çalıştığınızdan emin değilim. Ve val'i de alıyorsunuz, ki bu oldukça kafa karıştırıcı. Teşekkürler
Vladimir Djuricic

2
Tüm radyolarıma bir "id" eklemek üzereydim, ama bu yöntem kusursuz çalıştı. Ancak, değeriniz çok kelimeli olduğunda ("renk mor" deyin), uygun teklifleri eklemeniz gerektiğini unutmayın: $("input[name=background][value='color purple']").prop("checked",true);
Tristan Tao

3
Seçilen cevaptan çok daha iyi! Tam aradığım şey. Seçilen cevap spesifikken bu geneldir. Harika, teşekkürler.
GarbageGigo

96

JQuery 1.6'ya eklenen ve aynı amaca hizmet eden bir işlev daha ().

$("#radio_1").prop("checked", true); 

13
attr('checked', true)jQuery 1.9 ile benim için durdu, bu çözüm!
Pascal

1
prop("checked", true)çalışıyor gibi görünüyor attr('checked', 'checked'), değil
Tomasz Kuter

@TomaszKuter Ben kontrol edin prop () çünkü DOM özelliği kontrol davranış etkilemelidir - ama onun garip - bu keman ( jsfiddle.net/KRXeV ) attr('checked', 'checked')aslında x çalışır
jave.web

İşte iyi bir
dezavantaj

81

Kısa ve okunması kolay seçenek:

$("#radio_1").is(":checked")

Doğru veya yanlış döndürür, böylece "if" deyiminde kullanabilirsiniz.


5
Teşekkürler! Aradığım şey bu, ama (FYI) OP, radyo düğmesini nasıl ayarlayacağımızı soruyordu, değeri değil. ("Kontrol" kelimesi kafa karıştırıcıydı.)
Bampfer

31

Bunu dene.

Radyo düğmesini Değer kullanarak kontrol etmek için bunu kullanın.

$('input[name=type][value=2]').attr('checked', true); 

Veya

$('input[name=type][value=2]').attr('checked', 'checked');

Veya

$('input[name=type][value=2]').prop('checked', 'checked');

ID kullanarak Radyo düğmesini kontrol etmek için bunu kullanın.

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

Veya

$('#radio_1').prop('checked','checked');


13

$.propYolu daha iyidir:

$(document).ready(function () {                            
    $("#radio_1").prop('checked', true);        
});

ve aşağıdaki gibi test edebilirsiniz:

$(document).ready(function () {                            
    $("#radio_1, #radio_2", "#radio_3").change(function () {
        if ($("#radio_1").is(":checked")) {
            $('#div1').show();
        }
        else if ($("#radio_2").is(":checked")) {
            $('#div2').show();
        }
        else 
            $('#div3').show();
    });        
});

9

Yapmak zorundasın

jQuery("#radio_1").attr('checked', 'checked');

Bu HTML özelliği


7

Mülkiyet nameişe yaramazsa idhala var olduğunu unutmayın . Bu cevap, idburada nasıl yaptığınızı hedeflemek isteyen insanlar içindir .

$('input[id=element_id][value=element_value]').prop("checked",true);

Çünkü mülk namebenim için çalışmıyor. Etrafınızı çevrelemediğinizden idve nameçift ​​/ tek tırnak işaretli olduğundan emin olun .

Şerefe!


7

Evet, benim için bir yol gibi çalıştı:

$("#radio_1").attr('checked', 'checked');

6

Bunu dene

$(document).ready(function(){
    $("input[name='type']:radio").change(function(){
        if($(this).val() == '1')
        {
          // do something
        }
        else if($(this).val() == '2')
        {
          // do something
        }
        else if($(this).val() == '3')
        {
          // do something
        }
    });
});

6

Şaşırtıcı bir şekilde, en popüler ve kabul edilen cevap, yorumlara rağmen uygun olayı tetiklemeyi görmezden geliyor. Çağırdığınızdan emin olun .change() , aksi takdirde tüm "değişmekte olan" bağlamalar bu etkinliği yoksayar.

$("#radio_1").prop("checked", true).change();

5
$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});

5

Değer elde etmek:

$("[name='type'][checked]").attr("value");

Set değeri:

$(this).attr({"checked":true}).prop({"checked":true});

Radyo Düğmesi attr ekle ekle işaretlendi:

$("[name='type']").click(function(){
  $("[name='type']").removeAttr("checked");
  $(this).attr({"checked":true}).prop({"checked":true});
});

5

Bunun bir radiodüğme olduğunu söylemek istiyoruz, bu yüzden lütfen aşağıdaki kodu deneyin.

$("input[type='radio'][name='userRadionButtonName']").prop('checked', true);

5

Herhangi birinin jQuery kullanıcı arayüzünü kullanırken bunu başarmaya çalışması durumunda, güncellenen değeri yansıtmak için UI onay kutusu nesnesini de yenilemeniz gerekir:

$("#option2").prop("checked", true); // Check id option2
$("input[name='radio_options']").button("refresh"); // Refresh button set

4

Bu kodu kullanıyorum:

İngilizce için özür dilerim.

var $j = jQuery.noConflict();

$j(function() {
    // add handler
    $j('#radio-1, #radio-2').click(function(){

        // find all checked and cancel checked
        $j('input:radio:checked').prop('checked', false);

        // this radio add cheked
        $j(this).prop('checked', true);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="section">
  <legend>Radio buttons</legend>
  <label>
    <input type="radio" id="radio-1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
  <br>
  <label>
    <input type="radio" id="radio-2">
    Option two can be something else
  </label>
</fieldset>


4

Bunu örnekle deneyin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>


<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>


3
function rbcitiSelction(e) {
     debugger
    $('#trpersonalemail').hide();
    $('#trcitiemail').show();
}

function rbpersSelction(e) {
    var personalEmail = $(e).val();
    $('#trpersonalemail').show();
    $('#trcitiemail').hide();
}

$(function() {  
    $("#citiEmail").prop("checked", true)
});

2
$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');

2
$("#radio_1").attr('checked', true);bu işe yaramaz. OP tarafından belirtildiği gibi
JohnP

2
Lütfen cevaplarınızdaki kodu açıklayın ve soruyu okuyun (bu denendi)
SomeKittens

2

Geliştirilecek bazı ilgili örnekler var, yeni bir koşul eklemek isteyip istemediğime bakalım, Sericiler ve Kaldırım Döşemeleri hariç proje Durum değerini tıkladıktan sonra renk düzeninin gizlenmesini istiyorsam.

Örnek burada:

$(function () {
    $('#CostAnalysis input[type=radio]').click(function () {
        var value = $(this).val();

        if (value == "Supply & Lay") {
            $('#ul-suplay').empty();
            $('#ul-suplay').append('<fieldset data-role="controlgroup"> \

http://jsfiddle.net/m7hg2p94/4/


2

Ayrıca, öğenin işaretli olup olmadığını kontrol edebilirsiniz:

if ($('.myCheckbox').attr('checked'))
{
   //do others stuff
}
else
{
   //do others stuff
}

İşaretlenmemiş öğeyi kontrol edebilirsiniz:

$('.myCheckbox').attr('checked',true) //Standards way

Ayrıca şu şekilde işareti kaldırabilirsiniz:

$('.myCheckbox').removeAttr('checked')

Radyo düğmesini kontrol edebilirsiniz:

JQuery eşit veya üzeri (> =) 1.6 sürümleri için şunu kullanın:

$("#radio_1").prop("checked", true);

(<) 1.6'dan önceki sürümler için şunu kullanın:

$("#radio_1").attr('checked', 'checked');

2

Kullandığım jquery-1.11.3.js

Temel Etkinleştirme ve devre dışı bırakma

İpuçları 1: (Radyo düğmesi tipi ortak Devre Dışı Bırak ve Etkinleştir)

$("input[type=radio]").attr('disabled', false);
$("input[type=radio]").attr('disabled', true); 

İpuçları 2: (Kimlik seçici Prop () veya attr () kullanma)

$("#paytmradio").prop("checked", true);
$("#sbiradio").prop("checked", false);

jQuery("#paytmradio").attr('checked', 'checked'); // or true this won't work
jQuery("#sbiradio").attr('checked', false);

İpuçları 3: (Sınıf seçici pervane () veya arrt () kullanma)

$(".paytm").prop("checked", true);
$(".sbi").prop("checked", false);

jQuery(".paytm").attr('checked', 'checked'); // or true
jQuery(".sbi").attr('checked', false);

DİĞER İPUÇLARI

$("#paytmradio").is(":checked")   // Checking is checked or not
$(':radio:not(:checked)').attr('disabled', true); // All not check radio button disabled

$('input[name=payment_type][value=1]').attr('checked', 'checked'); //input type via checked
 $("input:checked", "#paytmradio").val() // get the checked value

index.html

<div class="col-md-6">      
    <label class="control-label" for="paymenttype">Payment Type <span style="color:red">*</span></label>
    <div id="paymenttype" class="form-group" style="padding-top: inherit;">
        <label class="radio-inline" class="form-control"><input  type="radio" id="paytmradio"  class="paytm" name="paymenttype" value="1" onclick="document.getElementById('paymentFrm').action='paytmTest.php';">PayTM</label>
        <label class="radio-inline" class="form-control"><input  type="radio" id="sbiradio" class="sbi" name="paymenttype" value="2" onclick="document.getElementById('paymentFrm').action='sbiTest.php';">SBI ePAY</label>
    </div>
</div>

2

Kullanım prop () TEKNİĞİ

resim açıklamasını buraya girin

Kaynak Bağlantı

<p>
    <h5>Radio Selection</h5>

    <label>
        <input type="radio" name="myRadio" value="1"> Option 1
    </label>
    <label>
        <input type="radio" name="myRadio" value="2"> Option 2
    </label>
    <label>
        <input type="radio" name="myRadio" value="3"> Option 3
    </label>
</p>

<p>
    <button>Check Radio Option 2</button>
</p>


<script>
    $(function () {

        $("button").click(function () {
            $("input:radio[value='2']").prop('checked',true);
        });

    });
</script>

1

bunu dene

 $("input:checked", "#radioButton").val()

kontrol edilirse iade edilmezse kontrol True edilirse dönerFalse

jQuery v1.10.1

1

Yukarıdaki çözümlerin bazılarında çalışmaz, o zaman aşağıda deneyebilirsiniz:

jQuery.uniform.update(jQuery("#yourElementID").attr('checked',true));
jQuery.uniform.update(jQuery("#yourElementID").attr('checked',false));

Deneyebileceğiniz başka bir yol:

jQuery("input:radio[name=yourElementName]:nth(0)").attr('checked',true);

1
Uniform , formları daha güzel hale getiren bir jQuery eklentisidir, ancak bunu ek öğeler ekleyerek yapar. İşaretlenen değeri her güncellediğimde, ekstra öğe durumu güncellenmez, bu da kontrol edilmeyen görünmez bir girdiye değil, kontrol edilen görünür bir arka plan öğesiyle sonuçlanır. jQuery.uniform.update()çözüm!
Denilson Sá Maia

1

Bunu dene:

$(document).ready(function(){
  $("#Id").prop("checked", true).checkboxradio('refresh');
});

Bu, checkboxradioeklentinin dosyasını dahil etmeden çalışmaz , bu da bunu yapmak için jQuery'nin yerleşik işlevlerini kullanabileceğinizde anlamsızdır (kabul edilen cevaba bakın).
Nathan

1

Sadece benzer bir sorunum var, basit bir çözüm sadece kullanmaktır:

.click()

Herhangi bir çözüm işlevi çağırdıktan sonra radyo yenilerseniz çalışır.


1
call click bazen ie9'da bir baş ağrısı
Astolfo Hoscher

1

attr iki dizeyi kabul eder.

Doğru yol:

jQuery("#radio_1").attr('checked', 'true');
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.