Come deselezionare un pulsante di opzione?

Ho un gruppo di pulsanti di opzione che desidero deselezionare dopo l'invio di un modulo AJAX tramite jQuery. Ho la seguente funzione:

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

Con l'aiuto di questa funzione, posso cancellare i valori nelle caselle di testo, ma non riesco a cancellare i valori dei pulsanti di opzione.

A proposito, ho anche provato, $(this).val("");ma non ha funzionato.

o (js semplice)

this.checked = false;

o (jQuery)

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

Vedi la pagina di aiuto di jQuery prop () per una spiegazione sulla differenza tra attr () e prop () e perché prop () è ora preferibile.
prop () è stato introdotto con jQuery 1.6 nel maggio 2011.

Non avresti bisogno della eachfunzione

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

O

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

Lo stesso dovrebbe valere anche per la tua casella di testo:

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

Ma potresti migliorare questo

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

Provare

$(this).removeAttr('checked')

Dal momento che molti browser interpretano "controllato = nulla" come vero. Ciò rimuoverà del tutto l'attributo controllato.

Spero che sia di aiuto.

Leggera modifica del plugin di Laurynas basato sul codice di Igor. In questo modo sono possibili le etichette associate ai pulsanti di scelta come target:

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

Grazie Patrick, mi hai reso felice! È il mousedown che devi usare. Tuttavia ho migliorato il codice in modo da poter gestire un gruppo di pulsanti di opzione.

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

Riscrivi il codice di Igor come plugin.

Uso:

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

Collegare:

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

Per il gruppo radio e 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');
        }
    });
});

Prova questo, questo farà il trucco:

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

Provare

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

Puoi anche simulare il comportamento del pulsante di opzione utilizzando solo le caselle di controllo:

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

Quindi, puoi utilizzare questo semplice codice per lavorare per te:

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

Funziona bene e hai un maggiore controllo sul comportamento di ciascun pulsante.

Puoi provarlo da solo a: http://jsfiddle.net/almircampos/n1zvrs0c/

Questo fork ti consente anche di deselezionare tutto come richiesto in un commento: http://jsfiddle.net/5ry8n4f4/

Basta inserire il seguente codice per jQuery:

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

E per JavaScript:

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

Non è necessario mettere alcun ciclo foreach, .each () fubction o altro

Usa questo

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

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

Questo è quasi buono ma hai perso lo [0]

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

È possibile utilizzare questo JQuery per deselezionare il pulsante di opzione

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

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

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

Ogni volta che si fa doppio clic in una radio selezionata, la selezione viene modificata in false

Le mie radio iniziano con id=radxxxxxxxxperché uso questo selettore ID.

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

Il selettore corretto è: #frm input[type="radio"]:checked no#frm input[type="radio":checked]