Come posso alternare radiobutton

Question

dire che questo è il mio HTML:

<input type="radio" name="rad" id="Radio0" checked="checked" /> 
<input type="radio" name="rad" id="Radio1" /> 
<input type="radio" name="rad" id="Radio2" /> 
<input type="radio" name="rad" id="Radio4" /> 
<input type="radio" name="rad" id="Radio3" /> 

Come si può vedere il pulsante di scelta prima è selezionata. Ho bisogno del pulsante radio per funzionare come interruttore. Per es. Se faccio nuovamente clic su radio0, tutti i pulsanti di opzione dovrebbero essere deselezionati.

Come posso ottenere quello?

Aggiornamento: Non voglio pulsanti aggiuntivi. Per es. Potrei aggiungere un pulsante e impostare la proprietà checked per tutti i pulsanti radio su false. Tuttavia, non lo voglio. Voglio solo che il mio modulo consista di questi 4 pulsanti di opzione.

Aggiornamento: Poiché la maggior parte delle persone non capisce quello che voglio, fammi provare a riformulare: voglio che il pulsante di opzione funzioni in modalità di commutazione. Ho dato lo stesso nome a tutti i pulsanti di opzione quindi è un gruppo. Ora voglio che i pulsanti radio si attivino. Per esempio. se clicco su radio0, dovrebbe essere deselezionato se è selezionato e controllato se è deselezionato.

Answer 1

Il problema che si scopre è che non appena si fa clic su un pulsante di opzione, il suo stato viene modificato prima di poterlo verificare. Quello che suggerisco è di aggiungere un attributo personalizzato per tenere traccia dello stato precedente di ogni radio in questo modo:

$(function(){ 
    $('input[name="rad"]').click(function(){ 
     var $radio = $(this); 

     // if this was previously checked 
     if ($radio.data('waschecked') == true) 
     { 
      $radio.prop('checked', false); 
      $radio.data('waschecked', false); 
     } 
     else 
      $radio.data('waschecked', true); 

     // remove was checked from other radios 
     $radio.siblings('input[name="rad"]').data('waschecked', false); 
    }); 
}); 

Sarà inoltre necessario aggiungere questo attributo per il markup della radio inizialmente controllato

<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" /> 

Vedi demo qui: http://jsfiddle.net/GoranMottram/VGPhD/2/

Answer 2

Una volta che il nome di 2 o più pulsanti di opzione è lo stesso, diventano automaticamente un gruppo. In quel gruppo può essere controllato solo un pulsante radio. Hai già raggiunto questo.

Answer 3

io uso un onClick() come il seguente per i miei radio personalizzati:

$(function(){ 
    // if selected already, deselect 
    if ($(this).hasClass('selected') { 
    $(this).prop('checked', false); 
    $(this).removeClass('selected'); 
    } 
    // else select 
    else { 
    $(this).prop('checked', true); 
    $(this).addClass('selected'); 
    } 
    // deselect sibling inputs 
    $(this).siblings('input').prop('checked', false); 
    $(this).siblings('input').removeClass('selected'); 
}