Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adds a checked class to all checked radio buttons for
(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);
}
}
}
}());
@patik

This comment has been minimized.

Copy link

commented Jul 30, 2014

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.

@artlawry

This comment has been minimized.

Copy link
Owner Author

commented Aug 6, 2014

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.
@artlawry

This comment has been minimized.

Copy link
Owner Author

commented Aug 6, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.