I have a click event handler attached to a group of radio inputs, and want to see if I am clicking on the radio button that is already selected (has property 'checked' set). I figured the event handler would act in a daisy chained fashion (first calling my event handler on the click and then continuing down the chain to the default behavior of the click). Apparently this is not the case, because when I evaluate if the property 'checked' is true on the radio button I just clicked, it always returns true in my click event handler.

The click has already been processed by the default behavior and has already applied the 'checked' property to the radio button I just clicked. Again, I figured my click event handler would be processed prior to that default behavior. What's even more odd is that even when I prevent the default behavior, it still returns true for the 'checked' property. I assume this is because the 'checked' property is being processed by the 'change' event, so preventing the default behavior on my click event handler is not affecting anything.

$("input[type='radio']").click(function(e) {
  e.preventDefault();

  alert($(this).prop("checked")); // always returns true; i want prop value immediately prior to click
});

How can I achieve what I'm after? That is, to see whether or not the radio button that was just clicked on was the one already checked. Thanks.

I have a click event handler attached to a group of radio inputs, and want to see if I am clicking on the radio button that is already selected (has property 'checked' set). I figured the event handler would act in a daisy chained fashion (first calling my event handler on the click and then continuing down the chain to the default behavior of the click). Apparently this is not the case, because when I evaluate if the property 'checked' is true on the radio button I just clicked, it always returns true in my click event handler.

The click has already been processed by the default behavior and has already applied the 'checked' property to the radio button I just clicked. Again, I figured my click event handler would be processed prior to that default behavior. What's even more odd is that even when I prevent the default behavior, it still returns true for the 'checked' property. I assume this is because the 'checked' property is being processed by the 'change' event, so preventing the default behavior on my click event handler is not affecting anything.

$("input[type='radio']").click(function(e) {
  e.preventDefault();

  alert($(this).prop("checked")); // always returns true; i want prop value immediately prior to click
});

How can I achieve what I'm after? That is, to see whether or not the radio button that was just clicked on was the one already checked. Thanks.

• javascript
• jquery

Share Improve this question Follow asked Oct 27, 2013 at 20:17 onlinespendingonlinespending 1,16922 gold badges1212 silver badges2121 bronze badges 7

• I reckon you're better off writing code which captures the id attribute of the default-checked radio button as soon as the page loads, then just modify your onclick code to check whether the radio button which fired the event has the id which matches the pre-checked id you've already stored. Trying to fight the way that the event chain works will probably just result in frustration. – Bobulous Commented Oct 27, 2013 at 20:20
• Since you cannot have more than one radio checked, you can just keep track of the last checked radio and pare. – plalx Commented Oct 27, 2013 at 20:26
• 2 Capture mousedown instead of click. – user2625787 Commented Oct 27, 2013 at 20:27
• Jeffman - looks like this prevents the label also registering as a click for the radio button. plalx - that's a consideration, but if I have 50 radio groups on the page, I don't want to have to keep track of each and every group. Would be nice to have a solution that works for all of them. – onlinespending Commented Oct 27, 2013 at 20:37
• Well, yes. If you kill the mousedown, you kill the click, and the same will be true of an associated label. If you want separate handlers for the label and the button (I'm not sure if that's what you're saying) you need more plicated logic. – user2625787 Commented Oct 27, 2013 at 20:40

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 3

Based on the response of @Jeffman , I was able to get something to work for what I needed to do. I have custom buttons, only one of which can be selected (hence the use of radio buttons). However, if you click on the one that's already selected, it should deselect and select the default value instead.

Things I had to do. Handle mousedown events on the radio labels. If I am clicking on the already selected radio, set the default button to be 'checked'. Else I just select the button that has been clicked on. I had to disable the 'click' event on these buttons, as that would override my irregular handling of the radio buttons (for some reason the selection would snap back to the one that was clicked when I overrode it and chose the default one manually). This also meant I would need to manually trigger the change event, as I do the custom radio button styling there.

$(".radios > label").mousedown(function(e) {

var l = $(this); // label
var t = l.parent(); // container for radio group
var i = l.find("input"); // input element of this label

if(i.prop("checked")) { // clicking on the already selected button
    t.find(".default_radio input").prop("checked", true).trigger("change");     
} else {
    i.prop("checked", true).trigger("change");
}
}).bind('click',false);

$("input[type='radio']").change(function(e) {

    // style the buttons here
});

Save radio status before click via mousedown

var was_checked;  
  $( "#radio" ).mousedown(function() {       
     was_checked = $(this)[0].checked;             
  });

  $( "#radio" ).click(function() {               
        $(this).attr('checked', !was_checked);      
  });

i think you should also return false. not only preventDefault

Here is a sample code that would do the trick

<script>
$(function() {
    var radios = {};

    $("input[type='radio']").each(function() {
        radios[$(this).uniqueId().attr('id')] = false;
    });
    function resetRadioState() {
        $("input[type='radio']").each(function() {
            radios[$(this).attr('id')] = $(this).is(':checked');
        });
    }
    resetRadioState();
    $("input[type='radio']").click(function(e) {
        alert(radios[$(this).attr('id')]);
        resetRadioState();
    });
})
</script>

<input type="radio" name="group[]"/>
<input type="radio" name="group[]" checked/>