Jquery Radio conjunto de botões permite desmarcar

Se você tem um par de rádios em um conjunto de botões (ou não) e deseja ser capaz de “desmarcar” qualquer item selecionado, você pode implementar a correção abaixo que usa um parâmetro personalizado no HTML e jquery.

<!-- HTML -->
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" checkstate="false" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checkstate="true" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" checkstate="false" /><label for="radio3">Choice 3</label>
</div>
</form>

Aqui está o jquery anexado ao onclick do rádio, on ready.

<!-- JS -->
<script type="text/javascript">

$
(function(){

$
('.radio').buttonset();
$
("[name='radio']").click(function(){
//if this item is already ticked, make it unticked.
if ($(this).attr('checkstate') == 'true')
{
$
(this).attr('checked', false);
$
(this).attr('checkstate', 'false'); // .attr returns a string for unknown param values.
}
else
{
$
(this).attr('checked', true);
$
(this).attr('checkstate', 'true');
}
//refresh the buttonset to display the states correctly.
$
('.button_bar').buttonset('refresh');
});

}); //close onready

</script>