Question

This is my jQuery script:

$("input[type=radio]:checked").live("click", function() {
    $(this).attr("checked",false);
});

I want to make all my radio button can be checked and unchecked. The code suppose to trigger ONLY when checked radio being clicked. But somehow, any radio click (whether it’s checked or not) will trigger this event. It’s as if the browser will check the radio first and then run my script.

If I alert($("input[type=radio]:checked").size()), it gave me the correct count.

I’m testing the code in FF4 but I hope the solution can cater for IE as well.

Ok, since my question seems confusing, this is the working code for what I want, BUT it requires additional custom attribute which I hope can avoid.

<input type="radio" name="group1" value="1" isChecked="false"/>
<input type="radio" name="group1" value="2" isChecked="false"/>
<input type="radio" name="group1" value="3" isChecked="false"/>

<script>

$(document).ready(function(){
    $("radio").click(function(){
        if($(this).attr("isChecked")=="false"){
            $(this).attr("isChecked","true");
            $(this).attr("checked",true);
        }
        else{
            $(this).attr("isChecked","false");
            $(this).attr("checked",false);
        }
    });
});

</script>

Answer 1

This isn’t really the way that radio buttons are intended to be used. It seems like you are trying to create an input control that’s somewhere between a radio button and a checkbox.

There are a couple of approaches you could take:

1) Use a separate button to clear the radio buttons:

The HTML:

<input id="clearRadios" type="button">Clear</input>

The jQuery:

$('#clearRadios').click(function() {
    // use attr only if you're using an older version of jQuery
    $('input[type=radio]').prop('checked', false);
});

2) Use checkboxes rigged to work like radio buttons:

var $chkboxes = $('input[type=checkbox]');
$chkboxes.click(function() {
    var currChkbox = this;
    $chkboxes.each(function() {
        if (this !== currChkbox) {
            $(this).prop('checked', false);
        }
    });      
});

If it were me, I’d probably go with the first option in most circumstances.