OnChange event handler for radio button (INPUT type="radio") doesn't work as one value
var rad = document.myForm.myRadios;var prev = null;for (var i = 0; i < rad.length; i++) { rad[i].addEventListener('change', function() { (prev) ? console.log(prev.value): null; if (this !== prev) { prev = this; } console.log(this.value) });}<form name="myForm"> <input type="radio" name="myRadios" value="1" /> <input type="radio" name="myRadios" value="2" /></form>Here's a JSFiddle demo: https://jsfiddle.net/crp6em1z/
I would make two changes:
<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" /><input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />- Use the
onclickhandler instead ofonchange- you're changing the "checked state" of the radio input, not thevalue, so there's not a change event happening. - Use a single function, and pass
thisas a parameter, that will make it easy to check which value is currently selected.
ETA: Along with your handleClick() function, you can track the original / old value of the radio in a page-scoped variable. That is:
var currentValue = 0;function handleClick(myRadio) { alert('Old value: ' + currentValue); alert('New value: ' + myRadio.value); currentValue = myRadio.value;}var currentValue = 0;function handleClick(myRadio) { alert('Old value: ' + currentValue); alert('New value: ' + myRadio.value); currentValue = myRadio.value;}<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" /><input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />
As you can see from this example: 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);});both the click and change events are fired when selecting a radio button option (at least in some browsers).
I should also point out that in my example the click event is still fired when you use tab and the keyboard to select an option.
So, my point is that even though the change event is fired is some browsers, the click event should supply the coverage you need.