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>