Как снять отметку с радио кнопки?

Question

У меня есть группа переключателей, которые я хочу снять после отправки формы AJAX с использованием jQuery. У меня есть следующая функция:

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

С помощью этой функции я могу очистить значения в текстовых полях, но не могу очистить значения переключателей.

Кстати, я тоже пробовал $(this).val("");, но это не сработало.

Answer 1

либо (обычный js)

this.checked = false;

или (jQuery)

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

См. Справочную страницу jQuery prop () для объяснения различия между attr () и prop () и почему prop () теперь предпочтительнее.
prop () была представлена ​​в jQuery 1.6 в мае 2011 года.

Answer 2

Вам не понадобится функция each

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

Или

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

То же самое относится и к вашему текстовому полю:

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

Но вы могли бы улучшить это

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

Answer 3

Попробуйте

$(this).removeAttr('checked')

Так как многие браузеры будут интерпретировать 'флажок = что-нибудь' как истину. Это полностью удалит отмеченный атрибут.

Надеюсь, это поможет.

Answer 4

Небольшая модификация плагина Laurynas на основе кода Игоря. Это включает в себя возможные метки, связанные с целевыми переключателями:

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

Answer 5

Спасибо, Патрик, ты сделал мой день! Вы должны использовать moussedown. Однако я улучшил код, чтобы вы могли обрабатывать группу переключателей.

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

Answer 6

Переписать код Игоря как плагин.

Использование:

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

Answer 7

Для радио и радиогруппы:

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

Answer 8

Попробуйте, это поможет:

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

Answer 9

Попробуйте

$(this).attr("checked" , false );

Answer 10

Вы также можете моделировать поведение радиокнопок, используя только флажки:

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

Затем вы можете использовать этот простой код, чтобы работать для вас:

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

Он отлично работает, и у вас больше контроля над поведением каждой кнопки.

Вы можете попробовать это самостоятельно: http://jsfiddle.net/almircampos/n1zvrs0c/

Эта вилка также позволяет отменить выбор всего, как требуется в комментарии: http://jsfiddle.net/5ry8n4f4/