¿Cómo puedo activar el botón de radio?

Diga que este es mi HTML:

     

Como puede ver, el primer botón de opción está marcado. Necesito el botón de radio para funcionar como alternar. Por ej. Si vuelvo a hacer clic en radio0 , todos los botones de radio deberían estar desmarcados.

¿Cómo puedo lograr eso?

Actualización: no quiero botones adicionales. Por ej. Podría agregar un botón y configurar la propiedad marcada para que todos los botones de opción sean falsos. Sin embargo, no quiero eso. Solo quiero que mi formulario consista en estos 4 botones de radio.

Actualización: dado que la mayoría de las personas no entienden lo que quiero, permítanme intentar reformular: quiero que el botón de radio funcione en modo de alternar. He dado el mismo nombre a todos los botones de radio, por lo tanto, es un grupo. Ahora quiero que los botones de radio se activen solo. P.ej. si hago clic en radio0, debería desmarcarse si está marcada y marcada si no está marcada.

El problema que encontrará es que, tan pronto como se hace clic en un botón de opción, su estado cambia antes de que pueda verificarlo. Lo que sugiero es agregar un atributo personalizado para hacer un seguimiento del estado previo de cada radio, así:

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

También deberá agregar este atributo al marcado de radio inicialmente verificado

  

Vea la demostración aquí: http://jsfiddle.net/GoranMottram/VGPhD/2/

Una vez que asigna el mismo nombre a 2 o más botones de opción, se convierten automáticamente en un grupo. En ese grupo solo se puede verificar un botón de opción. Ya has logrado esto.

Uso un onClick () como el siguiente para mis radios personalizadas:

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

El uso de @Goran Mottram responde simplemente retocando un poco para adaptarlo al caso en que los botones de opción no son hermanos.

 $(".accordian-radio-button").click(function(){ var wasChecked = true; if($(this).data('waschecked') == true){ $(this).prop('checked', false); wasChecked = false; } $('input[name="ac"]').data('waschecked', false); $(this).data('waschecked', wasChecked); })  

Este código resolvió mi problema

 $("[type='radio']").on('click', function (e) { var previousValue = $(this).attr('previousValue'); if (previousValue == 'true') { this.checked = false; $(this).attr('previousValue', this.checked); } else { this.checked = true; $(this).attr('previousValue', this.checked); } }); 
   
Blue Green Yellow Orange