Como desmarcar um botão de opção?


482

Eu tenho um grupo de botões de opção que desejo desmarcar depois que um formulário AJAX é enviado usando o jQuery. Eu tenho a seguinte função:

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

Com a ajuda dessa função, posso limpar os valores nas caixas de texto, mas não consigo limpar os valores dos botões de opção.

A propósito, eu também tentei, $(this).val("");mas isso não funcionou.


3
Você não precisaria de cada função. Você pode simplesmente chamar a função desejada no objeto jQuery. Veja minha resposta abaixo
James Wiseman

1
não há necessidade de cada função (). jQuery ("input: radio"). removeAttr ("selected");
Jitendra Damor

Respostas:


737

quer (js simples)

this.checked = false;

ou (jQuery)

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

Consulte a página de ajuda do jQuery prop () para obter uma explicação sobre a diferença entre attr () e prop () e por que prop () agora é preferível.
prop () foi introduzido com o jQuery 1.6 em maio de 2011.


29
PPL, estar ciente de que seu comportamento está mudando em 1,6 em favor de prop(), enquanto .attr()será restrito aos atributos reais
Fabiano Soriani

Então, é melhor usar JS simples aqui?
Doug Molineux

14
@Pete: Eu diria que, se você tiver um sistema construído em jQuery, a vantagem adicional que você oferece é que, se houver um navegador que lide com isso de maneira diferente, você poderá delegar o suporte do navegador à biblioteca. No entanto, se o seu software atualmente não usa o jQuery, não valeria a pena incluir realmente a biblioteca apenas para isso.
David Hedlund

@ David Hedlund: Suponho que você esteja insinuando que todos os principais navegadores lidam com isso da mesma maneira que hoje, certo?
Shawn

2
@ qris: Seu problema provavelmente está em outro lugar. Demonstração simples, usando o jQuery 1.9 . Claro que funciona no meu Chrome.
precisa

88

Você não precisaria da eachfunção

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

Ou

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

O mesmo deve se aplicar à sua caixa de texto:

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

Mas você poderia melhorar isso

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

2
.removeAttr provavelmente causará problemas.
Kzqai

Gostaria de expandir como? Ou fornecer um link?
James Wiseman 8/13

Sim, Kzqai, também estou curioso para saber se minha resposta foi negada. A documentação menciona nenhum risco.
Cjstehno

1
A documentação relevante está realmente no método .prop (): api.jquery.com/prop Quote "As propriedades geralmente afetam o estado dinâmico de um elemento DOM sem alterar o atributo HTML serializado. Os exemplos incluem a propriedade value dos elementos de entrada, a propriedade disabled de entradas e botões ou a propriedade marcada de uma caixa de seleção.O método .prop () deve ser usado para definir desabilitado e marcado em vez do método .attr (). O método .val () deve ser usado para obter e definir valor . " Isso significa que ...
Kzqai 8/13

1
... Isso significa que .attr () alterará uma fonte subjacente diferente de .prop (), o atributo html serializado em vez do DOM, e embora isso possa ser compatível agora (por exemplo, o jQuery 1.9 pode modificar os dois quando quando .attr () é usado), não há garantia de que será mantida a modificação tanto no futuro quando .prop () for canônico. Por exemplo, se você usar .attr ('marcado', falso); e uma biblioteca que você usa inclui .prop ('marcado', verdadeiro) ;, haverá um conflito inerente que pode causar bugs irritantes.
Kzqai

29

Tentar

$(this).removeAttr('checked')

Como muitos navegadores interpretam 'verificado = qualquer coisa' como verdadeiro. Isso removerá o atributo verificado por completo.

Espero que isto ajude.


Além disso, como uma das outras respostas menciona, você não precisará de cada função; você poderia apenas encadear a chamada removeAttr para o seletor.
precisa saber é o seguinte

6
NOTA: esta resposta é de 2010. Naquela época, essa era uma abordagem válida e aceita. Desde então, tornou-se obsoleto.
precisa saber é o seguinte

21

Ligeira modificação do plugin de Laurynas com base no código de Igor. Isso acomoda possíveis rótulos associados aos botões de opção segmentados:

(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
Depende de como os rótulos são usados; se eles usam IDs, esse código funciona; se o botão de opção estiver aninhado no rótulo, ele não funciona. Você pode usar esta versão ainda mais aprimorada: gist.github.com/eikes/9484101
eikes

20

Obrigado Patrick, você fez o meu dia! É uma ratoeira que você precisa usar. No entanto, aprimorei o código para que você possa lidar com um grupo de botões de opção.

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

Reescreva o código de Igor como plug-in.

Usar:

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

Plugar:

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

Desmarcar não funciona se eu estiver clicando no rótulo. Portanto, embora seja possível selecionar um rádio clicando no rótulo, desmarcar apenas funciona clicando no próprio botão de rádio.
Simon Hürlimann 28/06

@ alkos333 tem uma solução que parece funcionar também com etiquetas.
Simon Hürlimann

Depende de como os rótulos são usados; se eles usam IDs, o código @ alkos333 funciona; se o botão de opção estiver aninhado no rótulo, use esta versão: gist.github.com/eikes/9484101
eikes

16

Para rádio e grupo de rádio:

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

Tente isso, isso fará o truque:

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

Tentar

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

9

Você também pode simular o comportamento do botão de opção usando apenas caixas de seleção:

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

Em seguida, você pode usar este código simples para trabalhar para você:

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

Funciona bem e você tem mais controle sobre o comportamento de cada botão.

Você pode experimentá-lo sozinho em: http://jsfiddle.net/almircampos/n1zvrs0c/

Este fork também permite desmarcar tudo conforme solicitado em um comentário: http://jsfiddle.net/5ry8n4f4/


Isso é ótimo, exceto que você não pode desmarcar todas as caixas.
Stefan

6

Basta colocar o seguinte código para o jQuery:

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

E para javascript:

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

Não há necessidade de colocar nenhum loop foreach, fubction .each () ou qualquer coisa


5

Usa isto

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

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

Isso é quase bom, mas você perdeu o [0]

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


1
ou simplesmente: this.checked = false;
eikes

4

Você pode usar esse JQuery para desmarcar o botão de opção

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

Toda vez que você clica duas vezes em um rádio marcado, a verificação muda para false

Meus rádios começam id=radxxxxxxxxporque eu uso esse seletor de identificação.


3
Escreva a resposta em inglês (compreensível).
Ericbn 13/08/14

@ericbn e se alguém não souber inglês?
AlphaMale 28/01

O inglês @AlphaMale é o idioma oficial deste site.
Cristik 04/06

@Cristik Nem todos os programadores são de países de língua "inglês". Isso significa que eles não podem postar neste fórum? Em segundo lugar, faz 2 anos companheiro. Obrigado por me esclarecer.
AlphaMale 6/06

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

O seletor correto é: #frm input[type="radio"]:checked not#frm input[type="radio":checked]

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.