You can see in my example that clicking the radio manually fires an alert, but clicking the check/uncheck links – which do it programmatically – does not.
https://codepen.io/PeteWilliams/pen/xxXLpYE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function() {
$('input[type=radio]').change(function() {
alert(' changed');
});
});
</script>
</head>
<body>
<p>
<label for="radio1" > RADIO BUTTON
<input id="radio1" type="radio" />
</label>
</p>
<p>
<a href="#" onclick="$('#radio1').prop('checked', true ); return false;">check</a>
</p>
<p>
<a href="#" onclick="$('#radio1').prop('checked', false ); return false;">uncheck</a>
</p>
</body>
</html>
It looks like .change() only fires on user interaction, not just any change.
Is there another way I can achieve this goal? In this instance, I cannot change the code that selects/deselects the radio, only the code that selects it.