Radio button change event not firing when radio is selected programmatically

Question

In the following code, clicking the selectRadio2 button does not fire the radio change event! Why not? Is there a workaround?

HTML:

<input id="radio1" type="radio" name="radioGroup" value="One"/>
<label for="radio1">One</label><br/>
<input id="radio2" type="radio" name="radioGroup" value="Two"/>
<label for="radio2">Two</label><br/>
<input id="radio3" type="radio" name="radioGroup" value="Three"/>
<label for="radio3">Three</label>

<br/><br/>
<button id="selectradio2">Select Radio 2</button>

JS:

$("input[name=radioGroup][type=radio]").change(function() {
    alert($(this).attr("id") + " checked");
});

$("#selectradio2").click(function() {
    $("#radio2").prop('checked',true);
});

JSFIDDLE DEMO

Answer 1

Since the change event requires an actual browser event initiated by the user instead of via javascript code. You need to trigger the change event using:

$("#selectradio2").click(function() {
    $("#radio2").prop('checked',true).change(); // or trigger('change')
});

Updated Fiddle