Bir radyo düğmesinin işareti nasıl kaldırılır?


482

AJAX formu jQuery kullanılarak gönderildikten sonra işaretini kaldırmak istediğim radyo düğmeleri grubu var. Ben aşağıdaki işlevi var:

function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).checked = false;  
  });
 }

Bu işlev sayesinde metin kutularındaki değerleri temizleyebilirim, ancak radyo düğmelerinin değerlerini temizleyemiyorum.

Bu arada, ben de denedim $(this).val("");ama işe yaramadı.


3
Her bir işleve ihtiyacınız olmaz. Sadece jQuery nesnesinde istediğiniz işlevi çağırabilirsiniz. Aşağıdaki cevabımı gör
James Wiseman

1
her () fonksiyona gerek yok .. jQuery ("input: radio"). removeAttr ("işaretli");
Jitendra Damor

Yanıtlar:


737

ya (düz js)

this.checked = false;

veya (jQuery)

$(this).prop('checked', false);
// Note that the pre-jQuery 1.6 idiom was
// $(this).attr('checked', false);

Bkz jQuery prop () yardım sayfasını arasındaki fark üzerinde bir açıklama attr () ve pervane () ) (ve neden prop şimdi tercih edilir.
prop () Mayıs 2011'de jQuery 1.6 ile tanıtıldı.


29
PPL, davranışları lehine 1.6 değişiyor unutmayın prop()ederken, .attr()gerçek niteliklerini sınırlı olacaktır
Fabiano Soriani

Burada düz JS kullanmak en iyisi midir?
Doug Molineux

14
@Pete: jQuery üzerine kurulmuş bir sisteminiz varsa, size ek bir avantaj, bunu farklı bir şekilde ele alan bir tarayıcı varsa, tarayıcı desteğini kütüphaneye devredebileceğinizdir. Ancak, yazılımınız şu anda jQuery kullanmıyorsa, sadece bunun için kütüphaneyi dahil etmek ek yüke değmez.
David Hedlund

@David Hedlund: Sanırım tüm büyük tarayıcıların bunu bugünkü gibi ele aldığını ima ediyorsun, değil mi?
Shawn

2
@qris: Sorununuz muhtemelen başka bir yerde. JQuery 1.9 kullanarak basit demo . Tabii Chrome'umda çalışıyor.
David Hedlund

88

Bu eachişleve ihtiyacınız olmaz

$("input:radio").attr("checked", false);

Veya

$("input:radio").removeAttr("checked");

Aynı şey metin kutunuz için de geçerli olmalıdır:

$('#frm input[type="text"]').val("");

Ama bunu geliştirebilirsin

$('#frm input:text').val("");

2
.removeAttr sorunlara neden olabilir.
Kzqai

Nasıl genişletilecek? Veya bir bağlantı mı sağladınız?
James Wiseman

Evet, Kzqai, cevabımın bunun için de aşağı oy verildiğini merak ediyorum. Belgelerde risk söz konusu değil.
cjstehno

1
İlgili belgeler aslında .prop () yöntemindedir: api.jquery.com/prop Alıntı "Özellikler genellikle serileştirilmiş HTML özniteliğini değiştirmeden DOM öğesinin dinamik durumunu etkiler. Örnekler girdi öğelerinin value özelliğini, devre dışı özelliğini içerir .ptr () yöntemi, .attr () yöntemi yerine devre dışı bırakılmış ve işaretlenmiş olarak ayarlamak için .prop () yöntemi, değeri almak ve ayarlamak için .val () yöntemi kullanılmalıdır. ." Bu demek oluyor ki ...
Kzqai

1
... Bu, .attr () öğesinin DOM yerine serileştirilmiş html özniteliği .prop () 'den farklı bir kaynağı değiştireceği anlamına gelir ve bu şimdi uyumlu olsa da (örn. JQuery 1.9, ne zaman .attr () kullanıldığında), bu .prop () kurallı olduğunda gelecekte her ikisini de değiştirmenin doğru olacağının garantisi değildir. Örneğin, .attr ('işaretli', yanlış) kullanırsanız; ve kullandığınız bir kitaplık .prop ('işaretli', doğru) içerir; sinir bozucu hatalara neden olabilecek doğal bir çakışma olacaktır.
Kzqai

29

Deneyin

$(this).removeAttr('checked')

Çünkü birçok tarayıcı 'ekli = herhangi bir şeyi' doğru olarak yorumlayacaktır. Bu, işaretlenen özelliği tamamen kaldıracaktır.

Bu yardımcı olur umarım.


Ayrıca, diğer cevaplardan biri olarak, her bir işleve ihtiyacınız olmayacak; removeAttr çağrısını seçiciye zincirleyebilirsiniz.
cjstehno

6
NOT: bu yanıt 2010 yılından alınmıştır. O zaman, bu geçerli ve kabul edilmiş bir yaklaşımdı. O zamandan beri kullanımdan kaldırıldı.
cjstehno

21

Igor'un koduna göre Laurynas eklentisinin hafif modifikasyonu. Bu, hedeflenen radyo düğmeleriyle ilişkili olası etiketleri içerir:

(function ($) {
    $.fn.uncheckableRadio = function () {

        return this.each(function () {
            var radio = this;
                $('label[for="' + radio.id + '"]').add(radio).mousedown(function () {
                    $(radio).data('wasChecked', radio.checked);
                });

                $('label[for="' + radio.id + '"]').add(radio).click(function () {
                    if ($(radio).data('wasChecked'))
                        radio.checked = false;
                });
           });
    };
})(jQuery);

1
Etiketlerin nasıl kullanıldığına bağlıdır, eğer kimlik kullanırlarsa bu kod çalışır, radyo düğmesi etikette yuvalanmışsa çalışır. Bu daha da gelişmiş sürümü kullanabilirsiniz: gist.github.com/eikes/9484101
eikes

20

Teşekkürler Patrick, günümü yaptın! Kullanmak zorunda olduğunuz fareler. Ancak bir grup radyo düğmesini işleyebilmeniz için kodu geliştirdim.

//We need to bind click handler as well
//as FF sets button checked after mousedown, but before click
$('input:radio').bind('click mousedown', (function() {
    //Capture radio button status within its handler scope,
    //so we do not use any global vars and every radio button keeps its own status.
    //This required to uncheck them later.
    //We need to store status separately as browser updates checked status before click handler called,
    //so radio button will always be checked.
    var isChecked;

    return function(event) {
        //console.log(event.type + ": " + this.checked);

        if(event.type == 'click') {
            //console.log(isChecked);

            if(isChecked) {
                //Uncheck and update status
                isChecked = this.checked = false;
            } else {
                //Update status
                //Browser will check the button by itself
                isChecked = true;

                //Do something else if radio button selected
                /*
                if(this.value == 'somevalue') {
                    doSomething();
                } else {
                    doSomethingElse();
                }
                */
            }
    } else {
        //Get the right status before browser sets it
        //We need to use onmousedown event here, as it is the only cross-browser compatible event for radio buttons
        isChecked = this.checked;
    }
}})());

17

Igor'un kodunu eklenti olarak yeniden yazın.

kullanın:

$('input[type=radio]').uncheckableRadio();

Eklenti:

(function( $ ){

    $.fn.uncheckableRadio = function() {

        return this.each(function() {
            $(this).mousedown(function() {
                $(this).data('wasChecked', this.checked);
            });

            $(this).click(function() {
                if ($(this).data('wasChecked'))
                    this.checked = false;
            });
        });

    };

})( jQuery );

Etiketi tıklarsam seçimin kaldırılması çalışmaz. Bu nedenle, etikete tıklayarak bir radyo seçmek mümkün olsa da, seçimi kaldırmak yalnızca radyo düğmesine tıklayarak çalışır.
Simon Hürlimann

@ alkos333'ün etiketlerle de çalıştığı anlaşılan bir çözümü var.
Simon Hürlimann

Etiketlerin nasıl kullanıldığına bağlıdır, eğer kimlik kullanırlarsa o zaman @ alkos333 kodu çalışır, radyo düğmesi etikette yuvalanmışsa, bu sürümü kullanın: gist.github.com/eikes/9484101
eikes

16

Radyo ve radyo grubu için:

$(document).ready(function() {
    $(document).find("input:checked[type='radio']").addClass('bounce');   
    $("input[type='radio']").click(function() {
        $(this).prop('checked', false);
        $(this).toggleClass('bounce');

        if( $(this).hasClass('bounce') ) {
            $(this).prop('checked', true);
            $(document).find("input:not(:checked)[type='radio']").removeClass('bounce');
        }
    });
});

14

Bunu deneyin, bu hile yapacaktır:

        $(document).ready(function() {
           $("input[type='radio']").mousedown(function(e) {
                if ($(this).attr("checked") == true) {
                   setTimeout("$('input[id=" + $(this).attr('id') + "]').removeAttr('checked');", 200);}
                else {
                    return true
                }
            });
        });


9

Radyo düğmesi davranışını yalnızca onay kutularını kullanarak simüle edebilirsiniz:

<input type="checkbox" class="fakeRadio" checked />
<input type="checkbox" class="fakeRadio" />
<input type="checkbox" class="fakeRadio" />

Ardından, sizin için çalışmak üzere bu basit kodu kullanabilirsiniz:

$(".fakeRadio").click(function(){
    $(".fakeRadio").prop( "checked", false );
    $(this).prop( "checked", true );
});

İyi çalışıyor ve her düğmenin davranışı üzerinde daha fazla kontrole sahipsiniz.

Kendiniz deneyebilirsiniz: http://jsfiddle.net/almircampos/n1zvrs0c/

Bu çatal ayrıca bir yorumda istendiği gibi seçimini kaldırmanıza izin verir: http://jsfiddle.net/5ry8n4f4/


Bu harika, ancak tüm kutuların işaretini kaldıramazsınız.
Stefan

6

Sadece jQuery için aşağıdaki kodu koyun:

jQuery("input:radio").removeAttr("checked");

Ve javascript için:

$("input:radio").removeAttr("checked");

Herhangi bir foreach döngüsü, .each () fubction veya herhangi bir şey koymaya gerek yoktur


5

Bunu kullan

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

4
$('#frm input[type="radio":checked]').each(function(){
   $(this).checked = false;  
  });

Bu neredeyse iyi ama [0]

Doğru - >> $(this)[0].checked = false;


1
ya da sadece:this.checked = false;
eikes

4

Bu JQuery'yi radyo düğmesi işaretini kaldırmak için kullanabilirsiniz

$('input:radio[name="IntroducerType"]').removeAttr('checked');
                $('input:radio[name="IntroducerType"]').prop('checked', false);

1
function setRadio(obj) 
{
    if($("input[name='r_"+obj.value+"']").val() == 0 ){
      obj.checked = true
     $("input[name='r_"+obj.value+"']").val(1);
    }else{
      obj.checked = false;
      $("input[name='r_"+obj.value+"']").val(0);
    }

}

<input type="radio" id="planoT" name="planoT[{ID_PLANO}]" value="{ID_PLANO}" onclick="setRadio(this)" > <input type="hidden" id="r_{ID_PLANO}" name="r_{ID_PLANO}" value="0" >

: D


-2
$('input[id^="rad"]').dblclick(function(){
    var nombre = $(this).attr('id');
    var checked =  $(this).is(":checked") ;
    if(checked){
        $("input[id="+nombre+"]:radio").prop( "checked", false );
    }
});

İşaretli bir radyoya her çift tıkladığınızda, işaretli yanlış olarak değişir

Telsizlerimle başlıyorum id=radxxxxxxxxçünkü bu kimlik seçiciyi kullanıyorum.


3
Lütfen cevabı (anlaşılır) ingilizce yazınız.
ericbn

@ericbn ya birisi İngilizce bilmiyorsa?
AlphaMale

@AlphaMale ingilizce bu sitedeki resmi dildir.
Cristik

@Cristik Tüm programcılar "İngilizce" konuşan ülkelerden gelmiyor. Bu, bu foruma gönderemeyecekleri anlamına mı geliyor? İkincisi, 2 yıl oldu dostum. Beni aydınladığın için teşekkürler tho.
AlphaMale

-2
function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).attr('checked', false);  
  });
 }

Doğru seçici: #frm input[type="radio"]:checked değil#frm input[type="radio":checked]

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.