Problem
For this, I’m searching for a generic solution.
Consider two inputs of the same type with the same name. When the form is submitted, the value that is sent with it is determined by the one that is checked:
<input type="radio" name="myRadios" onchange="handleChange1();" value="1" />
<input type="radio" name="myRadios" onchange="handleChange2();" value="2" />
When a radio button is de-selected, the change event is not triggered. So, if the user selects the second radio after selecting the first, handleChange1() does not run. This is a problem (at least for me) because there is no event where I can catch the de-selection.
What I’m looking for is a workaround for the checkbox group value’s onchange event, or a oncheck event that detects not only when a radio is checked but also when it is unchecked.
I’m sure some of you have encountered similar issue in the past. What are any workarounds (or, better yet, what is the proper course of action)? I simply want to catch the change event and access both the previously checked and newly checked radios.
P.S. While onclick appears to be a better (cross-browser) event for indicating when a radio is checked, it still does not solve the problem of unchecked radios.
It’s understandable why onchange for a checkbox type works in this example because the value it uploads changes when you check or uncheck it. I wish the radio buttons behaved more like the onchange property of a SELECT element, but what can you do?
Asked by Matthew
Solution #1
Here’s an example from JSFiddle: https://jsfiddle.net/crp6em1z/
Answered by Michal
Solution #2
Two adjustments would I make:
<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />
ETA: You may keep track of the original / old value of the radio in a page-scoped variable alongside your handleClick() function. That is to say:
var currentValue = 0;
function handleClick(myRadio) {
alert('Old value: ' + currentValue);
alert('New value: ' + myRadio.value);
currentValue = myRadio.value;
}
Answered by Nate Cook
Solution #3
As this example demonstrates: http://jsfiddle.net/UTwGS/
HTML:
<label><input type="radio" value="1" name="my-radio">Radio One</label>
<label><input type="radio" value="2" name="my-radio">Radio One</label>
jQuery:
$('input[type="radio"]').on('click change', function(e) {
console.log(e.type);
});
When you select a radio button option, both the click and change events are fired (at least in some browsers).
I should also mention that when you use tab and the keyboard to select an option in my example, the click event is still fired.
So, even if the change event is fired in some browsers, the click event should provide you with the coverage you require.
Answered by Philip Walton
Solution #4
What about utilizing Jquery’s change event?
$(function() {
$('input:radio[name="myRadios"]').change(function() {
if ($(this).val() == '1') {
alert("You selected the first option and deselected the second one");
} else {
alert("You selected the second option and deselected the first one");
}
});
});
jsfiddle: http://jsfiddle.net/f8233x20/
Answered by Razan Paul
Solution #5
You can use the JS script below.
<script>
function myfunction(event) {
alert('Checked radio with ID = ' + event.target.id);
}
document.querySelectorAll("input[name='myRadios']").forEach((input) => {
input.addEventListener('change', myfunction);
});
</script>
Answered by Buzz
Post is based on https://stackoverflow.com/questions/8838648/onchange-event-handler-for-radio-button-input-type-radio-doesnt-work-as-one