Radio button uncheck on second click
I'll suggest to add a custom attribute to keep track of each radio's previous state like so:
$(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);
});
});
You will also need to add this attribute to the initially checked radio markup
<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" />
JSFIDDLE DEMO
UPDATE:
$(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[type="radio"]').data('waschecked', false);
});
});
But do ensure that you don't have other radio-groups to work with, otherwise you have to provide some attributes to specify these buttons like name prop I focused earlier.
This should work more generally than the other solutions as it handles cases where all radios are not in the same parent.
var $radios = $('input[type="radio"]');
$radios.click(function () {
var $this = $(this);
if ($this.data('checked')) {
this.checked = false;
}
var $otherRadios = $radios.not($this).filter('[name="'
+ $this.attr('name') + '"]');
$otherRadios.prop('checked', false).data('checked', false);
$this.data('checked', this.checked);
});