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

482

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

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

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

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

systemsfault
источник
3
Вам не понадобится каждая функция. Вы можете просто вызвать нужную функцию для объекта jQuery. Смотрите мой ответ ниже
Джеймс Уайзман
1
нет необходимости в каждой функции (). jQuery («input: radio»). removeAttr («флажок»);
Джитендра Дамор

Ответы:

737

либо (просто 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 года.

Дэвид Хедлунд
источник
29
PPL, имейте в виду, что его поведение меняется на 1.6 в пользу prop(), в то время как .attr()будет ограничено фактическими атрибутами
Фабиано Сориани
Так лучше ли использовать здесь простой JS?
Дуг Молинью
14
@Pete: Я бы сказал, что если у вас есть система, построенная на jQuery, то дополнительное преимущество, которое дает вам, заключается в том, что если когда-либо будет браузер, который обрабатывает это по-другому, вы сможете делегировать поддержку браузера для библиотеки. Однако, если ваше программное обеспечение в настоящее время не использует jQuery, не стоит тратить время на включение библиотеки только для этого.
Дэвид Хедлунд
@ Дэвид Хедлунд: Я полагаю, вы подразумеваете, что все основные браузеры обрабатывают это так же, как сегодня, верно?
Шон
2
@qris: Ваша проблема, вероятно, где-то еще. Простая демонстрация с использованием jQuery 1.9 . Конечно работает в моем Chrome.
Дэвид Хедлунд
88

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

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

Или

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

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

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

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

$('#frm input:text').val("");
Джеймс Уайзман
источник
2
.removeAttr может вызвать проблемы.
Kzqai
Хотите расширить, как? Или предоставить ссылку?
Джеймс Уайзман
Да, Kzqai, мне также любопытно, что мой ответ за это тоже был отклонен. В документации не упоминается риск.
cjstehno
1
Соответствующая документация фактически относится к методу .prop (): api.jquery.com/prop Цитата «Свойства обычно влияют на динамическое состояние элемента DOM без изменения сериализованного атрибута HTML. Примеры включают свойство value входных элементов, свойство disabled входов и кнопок, или свойство checked флажка. Метод .prop () должен использоваться для установки отключенного и проверенного вместо метода .attr (). Метод .val () должен использоваться для получения и установки значения «. Это означает, что ...
Kzqai
1
... Это означает, что .attr () будет изменять другой исходный источник, чем .prop (), сериализованный атрибут html вместо DOM, и хотя это может быть совместимо сейчас (например, jQuery 1.9 может изменить оба, когда когда .attr () используется, это не гарантирует, что будет изменено в будущем, когда .prop () каноничен. Например, если вы используете .attr ('флажок', ложь); и используемая вами библиотека включает в себя .prop ('флажок', true); есть конфликт, который может вызвать досадные ошибки.
Kzqai
29

Пытаться

$(this).removeAttr('checked')

Поскольку многие браузеры будут интерпретировать «флажок = все» как истину. Это полностью удалит проверенный атрибут.

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

cjstehno
источник
Кроме того, как упоминается в одном из других ответов, вам не понадобится каждая функция; Вы можете просто соединить вызов removeAttr с селектором.
cjstehno
6
ПРИМЕЧАНИЕ: этот ответ с 2010 года. В то время это был действительный и принятый подход. С тех пор это стало устаревшим.
cjstehno
21

Небольшая модификация плагина 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);
alkos333
источник
1
Это зависит от того, как используются метки, если они используют идентификаторы, тогда этот код работает, если переключатель вложен в метку, это не так. Вы можете использовать эту еще более улучшенную версию: gist.github.com/eikes/9484101
eikes
20

Спасибо, Патрик, ты сделал мой день! Вы должны использовать 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;
    }
}})());
игорь
источник
17

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

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

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

Плагин:

(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 );
Laurynas
источник
Отмена выбора не работает, если я нажимаю на ярлык. Таким образом, хотя можно выбрать радио, нажав на ярлык, отмена выбора работает только при нажатии на саму кнопку переключателя.
Симон Хюрлиманн
У @ alkos333 есть решение, которое, похоже, работает и с ярлыками.
Симон Хюрлиманн
Это зависит от того, как используются метки, если они используют идентификаторы, тогда работает код @ alkos333, если в метку вложена
радиокнопка
16

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

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

Попробуйте это, это сделает свое дело:

        $(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
                }
            });
        });
Патрик Ритвельд
источник
10

Пытаться

$(this).attr("checked" , false );
Рахул
источник
9

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

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

Альмир Кампос
источник
Это здорово, за исключением того, что вы не можете снять все флажки.
Стефан
6

Просто поместите следующий код для jQuery:

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

И для JavaScript:

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

Нет необходимости помещать цикл foreach, fection () или что-либо еще

Джитендра Дамор
источник
5

Использовать этот

$("input[name='nameOfYourRadioButton']").attr("checked", false);
CrsCaballero
источник
4
$('#frm input[type="radio":checked]').each(function(){
   $(this).checked = false;  
  });

Это почти хорошо, но вы пропустили [0]

Исправить - >> $(this)[0].checked = false;

alecellis1985
источник
1
или просто:this.checked = false;
eikes
4

Вы можете использовать этот JQuery для снятия отметки с радио кнопки

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

Каждый раз, когда у вас есть двойной щелчок в проверенном радио, проверенные изменения становятся ложными

Мои радиостанции начинаются с того, id=radxxxxxxxxчто я использую этот селектор идентификаторов.

Эдуардо Андрес Меса Касерес
источник
3
Пожалуйста, напишите ответ на (понятном) английском языке.
ericbn
@ericbn, что если кто-то не знает английский?
AlphaMale
@AlphaMale английский является официальным языком на этом сайте.
Кристик
@Cristik Не все программисты приезжают из "англоязычных" стран. Означает ли это, что они не могут оставлять сообщения на этом форуме? Во-вторых, это было 2 года, приятель. Спасибо за то, что просветил меня.
AlphaMale
-2
function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).attr('checked', false);  
  });
 }

Правильный селектор: #frm input[type="radio"]:checked нет#frm input[type="radio":checked]

Сохранить
источник