Adds a checked class to all checked radio buttons for

radio-control ie7 ie8 shim.js

(function () {
  var labels, label, inputs, input, type, i, ilen;

  if (!document.addEventListener) {
    labels = document.getElementsByTagName('label');
    inputs = document.getElementsByTagName('input');

    function inputClick() {
      clicked = window.event.srcElement;

      inputChange(clicked);
    };

    function inputChange(changed) {
      var inputs, input, i, ilen, removeChecked, type, redrawElement;

      changed = changed || window.event.srcElement;
      inputs = document.getElementsByName(
        changed.getAttribute('name')
      );
      classRegex = /(^|\s+)checked(\s+|$)/g;
      type = changed.getAttribute('type');

      if (type === 'radio') {
        for (i = 0, ilen = inputs.length; i < ilen; i++) {
          input = inputs[i];
          input.className = input.className.replace(classRegex, ' ');
          if (input === changed) {
            input.className += ' checked';
          }
        }
      } else {
        if (classRegex.test(changed.className)) {
          changed.className = changed.className.replace(classRegex, ' ');
        } else {
          changed.className += ' checked';
        }
      }

      redrawElement = changed.parentNode || document.body;
      redrawElement.className += ' redraw';
      redrawElement.className =
        redrawElement.className.replace(/ redraw$/, '');
    };

    for (i = 0, ilen = labels.length; i < ilen; i ++) {
      label = labels[i];
      inputId = label.getAttribute('for') || label.getAttribute('htmlFor');

      if (inputId) {
        input = document.getElementById(inputId);
        type = input.getAttribute('type').toLowerCase();
      }

      if (type === 'checkbox' || type === 'radio') {
        label.attachEvent('onclick', function () {
          var label, input, click;

          label = window.event.srcElement;
          input = document.getElementById(
            label.getAttribute('for') || label.getAttribute('htmlFor')
          );

          inputClick(input);
        });
      }

    }

    for (i = 0, ilen = inputs.length; i < ilen; i ++) {
      input = inputs[i];
      inputId = input.id;
      type = input.getAttribute('type').toLowerCase();

      if (inputId && (type === 'checkbox' || type === 'radio')) {
        if (input.checked) {
          input.className += ' checked';
        }

        input.attachEvent('onchange', inputChange);
        input.attachEvent('onclick', inputClick);
      }
    }
  }
}());

I'd change if (window.attachEvent) to if (!window.addEventListener). With the former you'll get a false positive with IE9 which supports both event methods and doesn't need this polyfill.

Also, if you add .js to the file name in the gist we'll get nice syntax highlighting.

Thanks patik. Made a few other changes as well to address IE7/IE8 stubbornness:

• IE7/8 don't like triggeringonchange events (that's what the onclick events in addition to onchange are for)
• IE7/8 don't like to redraw dynamically altered parts of the page (that's what adding and removing redraw class is for)
• IE8 doesn't like to render grouped css rules if it doesn't like one of the nested rules, so split #radio:checked ~ .target rules from #radio.checked ~ .target rules.
• checkboxes are now supported and will receive a checked class as well.

minified: https://gist.github.com/artlawry/f2f49565bb68acd39832