jQuery Radio Button onChange Not Working

Question

I followed this example to capture an onChange() jQuery event for a radio button group: JQuery $(#radioButton).change(...) not firing during de-selection

But in my case, the solution given in that example is not working. I have the following generated from my JSP:

<input id="object.reportEntity.reportEntityIsPrime1" name="object.reportEntity.reportEntityIsPrime" type="radio" value="Y_YES" checked="checked"/>Prime                             

<input id="object.reportEntity.reportEntityIsPrime2" name="object.reportEntity.reportEntityIsPrime" type="radio" value="N_NO"/>Not Prime

JS:

$(document).ready(function() {      

    // Display Alert on Radio Change    
    $('input[name=object.reportEntity.reportEntityIsPrime]:radio').change(function () {
        alert('Radio Button clicked');
    }); 
}

The alert is not being diplayed. Also, there's this error:

Syntax error, unrecognized expression "input"

JavaScript (JS) error. I suspect it's because of the dots used in the name. — gene b., Nov 03 '15 at 19:14

scniro · Answer 1 · 2015-11-03T19:23:48.540

You should delegate the events.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

Also, you need to add " in your selector e.g. [name=""] Observe the following...

$('body').on('change', 'input[name="object.reportEntity.reportEntityIsPrime"]:radio', function() {
    alert('Radio Button clicked');
});

side note: you are missing ); on the end of your ready function

JSFiddle Link - working demo

Also, be sure to check out the jQuery Understanding Event Delegation docs for more info

score 1 · Accepted Answer · answered Nov 03 '15 at 19:18

1

Use quote marks for your name like this:

 $('input[name="object.reportEntity.reportEntityIsPrime"]:radio')

answered Nov 03 '15 at 19:18

twain

1,305
11
16

score 1 · Answer 3 · answered Nov 03 '15 at 19:18

Quote the name attribute in your selector string.

  $(document).ready(function() {      

            // Display Alert on Radio Change    
    $('input[name="object.reportEntity.reportEntityIsPrime"]:radio').change(function () {
                alert('Radio Button clicked');
            });

    }

jQuery Radio Button onChange Not Working

3 Answers3