Bagaimana menghapus centang tombol radio?


482

Saya memiliki sekelompok tombol radio yang ingin saya hapus centangnya setelah formulir AJAX dikirimkan menggunakan jQuery. Saya memiliki fungsi berikut:

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

Dengan bantuan fungsi ini, saya dapat menghapus nilai di kotak teks, tetapi saya tidak bisa menghapus nilai tombol radio.

Ngomong-ngomong, saya juga mencoba $(this).val("");tetapi itu tidak berhasil.


3
Anda tidak perlu masing-masing fungsi. Anda bisa memanggil fungsi yang Anda inginkan pada objek jQuery. Lihat jawaban saya di bawah ini
James Wiseman

1
tidak perlu untuk setiap fungsi () .. jQuery ("input: radio"). removeAttr ("dicentang");
Jitendra Damor

Jawaban:


737

salah satu (polos js)

this.checked = false;

atau (jQuery)

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

Lihat halaman bantuan jQuery prop () untuk penjelasan tentang perbedaan antara attr () dan prop () dan mengapa prop () sekarang lebih disukai.
prop () diperkenalkan dengan jQuery 1.6 pada Mei 2011.


29
PPL, ketahuilah bahwa perilakunya berubah pada 1,6 yang mendukung prop(), sementara .attr()akan dibatasi pada atribut yang sebenarnya
Fabiano Soriani

Jadi apakah yang terbaik menggunakan JS polos di sini?
Doug Molineux

14
@Pete: Saya akan mengatakan bahwa jika Anda memiliki sistem yang dibangun di jQuery, maka keuntungan tambahan yang memberi Anda adalah bahwa jika ada browser yang menangani ini secara berbeda, Anda akan dapat mendelegasikan dukungan browser ke perpustakaan. Namun, jika perangkat lunak Anda saat ini tidak menggunakan jQuery, itu tidak layak untuk memasukkan perpustakaan hanya untuk ini.
David Hedlund

@ David Hedlund: Saya kira Anda menyiratkan bahwa semua browser utama menangani ini dengan cara yang sama seperti hari ini, kan?
Shawn

2
@ qris: Masalah Anda mungkin di tempat lain. Demo sederhana, menggunakan jQuery 1.9 . Tentu bekerja di Chrome saya.
David Hedlund

88

Anda tidak akan memerlukan eachfungsinya

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

Atau

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

Hal yang sama juga berlaku untuk kotak teks Anda:

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

Tapi Anda bisa memperbaikinya

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

2
.removeAttr kemungkinan menyebabkan masalah.
Kzqai

Mau berkembang bagaimana? Atau berikan tautan?
James Wiseman

Ya, Kzqai, saya juga ingin tahu jawaban saya tidak dipilih untuk ini juga. Dokumentasi tidak menyebutkan risiko.
cjstehno

1
Dokumentasi yang relevan sebenarnya pada metode .prop (): api.jquery.com/prop Kutipan "Properti umumnya mempengaruhi keadaan dinamis elemen DOM tanpa mengubah atribut HTML serial. Contohnya termasuk properti nilai elemen input, properti yang dinonaktifkan. input dan tombol, atau properti yang dicentang dari kotak centang. Metode .prop () harus digunakan untuk mengatur dinonaktifkan dan diperiksa daripada metode .attr (). Metode .val () harus digunakan untuk mendapatkan dan menetapkan nilai . " Ini berarti ...
Kzqai

1
... Ini berarti .attr () akan mengubah sumber dasar yang berbeda dari .prop (), atribut html berserat, bukan DOM, dan sementara ini mungkin kompatibel sekarang (mis. JQuery 1.9 dapat memodifikasi keduanya saat ketika .attr () digunakan), itu bukan jaminan itu akan tetap baik untuk memodifikasi keduanya di masa depan ketika .prop () adalah kanonik. Misalnya, jika Anda menggunakan .attr ('dicentang', false); dan perpustakaan yang Anda gunakan termasuk .prop ('dicentang', true) ;, akan ada konflik inheren yang dapat menyebabkan bug yang mengganggu.
Kzqai

29

Mencoba

$(this).removeAttr('checked')

Karena banyak browser akan mengartikan 'checked = anything' sebagai true. Ini akan menghapus semua atribut yang dicentang.

Semoga ini membantu.


Juga, sebagai salah satu jawaban lain menyebutkan, Anda tidak perlu masing-masing fungsi; Anda hanya bisa mengaitkan panggilan removeAttr ke pemilih.
cjstehno

6
CATATAN: respons ini dari 2010. Pada waktu itu, ini adalah pendekatan yang valid dan diterima. Sejak itu menjadi usang.
cjstehno

21

Sedikit modifikasi plugin Laurynas berdasarkan pada kode Igor. Ini mengakomodasi kemungkinan label yang terkait dengan tombol radio yang ditargetkan:

(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
Itu tergantung pada bagaimana label digunakan, jika mereka menggunakan ID maka kode ini bekerja, jika tombol radio bersarang di label itu tidak. Anda dapat menggunakan versi yang lebih ditingkatkan ini: gist.github.com/eikes/9484101
eikes

20

Terima kasih Patrick, kamu membuat hariku! Ini mousedown yang harus Anda gunakan. Namun saya telah meningkatkan kode sehingga Anda dapat menangani sekelompok tombol radio.

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

Tulis ulang kode Igor sebagai plugin.

Menggunakan:

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

Plugin:

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

Membatalkan pilihan tidak berfungsi jika saya mengklik label. Jadi, sementara dimungkinkan untuk memilih radio dengan mengklik label, tidak memilih hanya berfungsi dengan mengklik tombol radio itu sendiri.
Simon Hürlimann

@ alkos333 memiliki solusi yang tampaknya bekerja dengan label juga.
Simon Hürlimann

Itu tergantung pada bagaimana label digunakan, jika mereka menggunakan ID maka kode @ alkos333 bekerja, jika tombol radio bersarang di label, gunakan versi ini: gist.github.com/eikes/9484101
eikes

16

Untuk radio dan grup radio:

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

Coba ini, ini akan melakukan trik:

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

Anda juga dapat mensimulasikan perilaku tombol radio hanya menggunakan kotak centang:

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

Kemudian, Anda dapat menggunakan kode sederhana ini untuk Anda:

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

Ini berfungsi dengan baik dan Anda memiliki kontrol lebih besar atas perilaku setiap tombol.

Anda dapat mencobanya sendiri di: http://jsfiddle.net/almircampos/n1zvrs0c/

Garpu ini juga memungkinkan Anda membatalkan pilihan semua seperti yang diminta dalam komentar: http://jsfiddle.net/5ry8n4f4/


Ini hebat, kecuali Anda tidak dapat menghapus centang pada semua kotak.
Stefan

6

Masukkan saja kode berikut untuk jQuery:

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

Dan untuk javascript:

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

Tidak perlu meletakkan foreach loop, .each () fubction atau apapun


5

Gunakan ini

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

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

Ini hampir baik tetapi Anda melewatkan [0]

Benar - >> $(this)[0].checked = false;


1
atau cukup:this.checked = false;
eikes

4

Anda dapat menggunakan JQuery ini untuk menghapus centang radiobutton

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

Setiap kali Anda memiliki klik dua kali pada radio yang dicentang, perubahan yang dicentang ke false

Radio saya mulai dengan id=radxxxxxxxxkarena saya menggunakan pemilih id ini.


3
Silakan tulis jawaban dalam bahasa Inggris (dapat dimengerti).
ericbn

@ ericbn bagaimana jika seseorang tidak bisa berbahasa Inggris?
AlphaMale

@AlphaMale bahasa Inggris adalah bahasa resmi di situs ini.
Cristik

@ Kristik Tidak semua programmer berasal dari negara-negara berbahasa "Inggris". Apakah itu berarti mereka tidak dapat memposting di forum ini? Kedua, ini sudah 2 tahun sobat. Terima kasih karena telah mencerahkan saya.
AlphaMale

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

Pemilih yang benar adalah: #frm input[type="radio"]:checked tidak#frm input[type="radio":checked]

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.