That’s because they don’t support addEventListener. See this question’s answers for details.
But since you’ve said you’re using jQuery, you can…use jQuery to get around this issue:
$('#clear').on('click', function () {
["A1","A2","A3","A4","A5","A6", "A1_flip"
].forEach(function(id) {
$("#" + id).prop("checked", false);
});
return false;
});
or actually, we can be a bit more direct:
$('#clear').on('click', function () {
$("#" + ["A1","A2","A3","A4","A5","A6", "A1_flip"].join(", #")).prop("checked", false);
return false;
});
…which works by building a selector string from the array.
I just realized I’m assuming the array’s contents vary. If they don’t, if you literally just want those specific elements:
$('#clear').on('click', function () {
$("#A1, #A2, #A3, #A4, #A5, #A6, #A1_flip").prop("checked", false);
return false;
});
…or better yet, give them a common class and use
$('#clear').on('click', function () {
$(".the-class").prop("checked", false);
return false;
});
If you don’t use jQuery and just mis-tagged it, see the linked question above. One of the answers there is mine, providing a hookEvent function that deals with cross-browser event handling:
var hookEvent = (function() {
var div;
// The function we use on standard-compliant browsers
function standardHookEvent(element, eventName, handler) {
element.addEventListener(eventName, handler, false);
return element;
}
// The function we use on browsers with the previous Microsoft-specific mechanism
function oldIEHookEvent(element, eventName, handler) {
element.attachEvent("on" + eventName, function(e) {
e = e || window.event;
e.preventDefault = oldIEPreventDefault;
e.stopPropagation = oldIEStopPropagation;
handler.call(element, e);
});
return element;
}
// Polyfill for preventDefault on old IE
function oldIEPreventDefault() {
this.returnValue = false;
}
// Polyfill for stopPropagation on old IE
function oldIEStopPropagation() {
this.cancelBubble = true;
}
// Return the appropriate function; we don't rely on document.body
// here just in case someone wants to use this within the head
div = document.createElement('div');
if (div.addEventListener) {
div = undefined;
return standardHookEvent;
}
if (div.attachEvent) {
div = undefined;
return oldIEHookEvent;
}
throw "Neither modern event mechanism (addEventListener nor attachEvent) is supported by this browser.";
})();
Then:
hookEvent(document.getElementById('clear'), 'click', function(e) {
["A1","A2","A3","A4","A5","A6", "A1_flip"
].forEach(function(id) {
document.getElementById(id).prop("checked", false);
});
e.preventDefault();
});