I'm trying to create a custom styled radio button and handle its event with JavaScript. So the simple task is; add or remove a class when the radio was selected or deselected.
It can be achieved via the change
event but my problem was the deselection of the radio on a group is not firing the event.
How can I handle this?
P.S
Without using a framework will be better.
Here's my example code (fiddle):
(function() {
var input = document.querySelectorAll('input');
var callback = function(e) {
e.addEventListener('change', function() {
if (this.checked) {
this.classList.add('colored');
} else {
// I would like this one to be triggered when
// the radio button was deselected by the user.
this.classList.remove('colored');
}
});
}
Array.prototype.forEach.call(input, callback);
})();