Как я могу переключить радиокнопку

Question

Скажи это мой 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" /> 

Как вы можете видеть кнопку первого радио проверяется. Мне нужен переключатель, чтобы он работал как переключатель. Напр. Если я снова нажму на radio0, все переключатели не должны быть отмечены.

Как я могу это достичь?

Обновление: Я не хочу никаких дополнительных кнопок. Напр. Я мог бы добавить кнопку и установить свойство checked для всех переключателей в качестве ложных. Однако я этого не хочу. Я хочу, чтобы моя форма состояла из этих 4 переключателей.

Обновление: Поскольку большинство людей не понимают, что я хочу, позвольте мне попытаться перефразировать - я хочу, чтобы радиокнопка функционировала в режиме переключения. Я дал одно и то же имя всем радиокнопкам, следовательно, это группа. Теперь я хочу, чтобы радиопульты переключались сами. Например. если я нажму на radio0, он должен быть снят, если он установлен и проверен, если он не установлен.

Answer 1

Проблема, которую вы обнаружите, заключается в том, что, как только щелкает переключатель, его состояние изменяется, прежде чем вы сможете его проверить. То, что я предлагаю, чтобы добавить пользовательский атрибут для отслеживания предыдущего состояния каждого радиоприемника так:

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

Вам также потребуется добавить этот атрибут к первоначально проверенного радио разметке

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

Смотрите демо здесь: http://jsfiddle.net/GoranMottram/VGPhD/2/

Answer 2

Как только вы укажете имя 2 или более переключателей как одно и то же, они автоматически станут группой. В этой группе можно проверить только одну радиокнопку. Вы уже достигли этого.

Answer 3

Я использую OnClick(), как следующее для моих пользовательских радиостанций:

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