javascript - 使用 JavaScript 处理单选按钮事件

Question

我正在尝试创建一个自定义样式的单选按钮并使用 JavaScript 处理其事件。所以简单的任务是；选择或取消选择单选按钮时添加或删除类。

它可以通过 change 事件来实现，但我的问题是取消选择组上的 radio 并不会触发该事件。

我该如何处理这个问题？

附注
不使用框架会更好。

这是我的示例代码( 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);
})();

Answer 1

(function() {
    var input = document.querySelectorAll('input');
  var callback = function(e) {
    e.addEventListener("change", function() {
    var radios = document.getElementsByName('radio-group');
    for( i = 0; i < radios.length; i++ ) {
        if(radios[i].checked ) {
            radios[i].classList.add('colored');;
        }
        else{
        radios[i].classList.remove('colored');;
        }
     }
    });
  }
  Array.prototype.forEach.call(input, callback);
})();

您必须浏览每个单选按钮