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](https://jsfiddle.net/ov4L6ud6/)):

```
(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);
})();

```