Event for $('input[type=radio]:checked')

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>

Your function seems to be unchecking what ever checkbox you are clicking on. Why? — James Khoury, Jul 13 '11 at 04:07
err... what i intend to do is, the radio can be checked, and then can also be unchecked. — Coisox, Jul 13 '11 at 04:08
that doesn't need any javascript to do that. Its normal behaviour. Your `.live("click"` will add a click event when ever a radio button is checked. What you want to do i think is add the radio button group's name as an attribute `eg ` then it will look after itself. http://www.echoecho.com/htmlforms10.htm — James Khoury, Jul 13 '11 at 04:12
i'm not trying to get the value for the group. I want to allow user to unchecked any checked radio. So it needs script. I knew if all radio have the same name, only 1 can be checked and the rest will be unchecked. — Coisox, Jul 13 '11 at 04:17
if you want only one to be checked or un checked use a checkbox instead: `` http://www.tizag.com/htmlT/htmlcheckboxes.php — James Khoury, Jul 13 '11 at 04:22
Can you write clearly, what you need? Looks like you are confused with the OOB behavior of radio buttons. Not? — kheya, Jul 13 '11 at 04:30
I have several radio (lets say 3). Only 1 can be activated (this is default behavior) but user can also deactivate all radio on the same group. — Coisox, Jul 13 '11 at 04:34
@Coisox If you insist on using radio buttons like this, then the working code that you already have is probably your best option. The problem is that you have to know when a radio button that is already checked is clicked again, and there's not a natural way to do that with the `checked` property. — FishBasketGordo, Jul 13 '11 at 04:53
@coisox You add another radio buttion that says `"none of the above"`. this is the standard way of doing this. — James Khoury, Jul 13 '11 at 05:04

FishBasketGordo · Accepted Answer · 2011-07-13T05:10:52.320

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.

Ur 1st solution is ok but it consumes additional space. As for ur 2nd solution, i'm studying it now. Please feel free to see my original post coz I added example. — Coisox, Jul 13 '11 at 04:47

Event for $('input[type=radio]:checked')

1 Answers1