I have this code:
<script>
function toggle(source) {
checkboxes = document.getElementsByName('DG1');
for each(var checkbox in checkboxes)
checkbox.checked = source.checked;
checkboxes = document.getElementsByName('DG2');
for each(var checkbox in checkboxes)
checkbox.checked = source.checked;
checkboxes = document.getElementsByName('DG3');
for each(var checkbox in checkboxes)
checkbox.checked = source.checked;
checkboxes = document.getElementsByName('DG4');
for each(var checkbox in checkboxes)
checkbox.checked = source.checked;
checkboxes = document.getElementsByName('DG5');
for each(var checkbox in checkboxes)
checkbox.checked = source.checked;
}
</script>
<input type="checkbox" onClick="toggle(this)" />Select All<br/>
<form method=POST action="DGUsageServlet">
<input type="checkbox" name="DG1">DG1</input>
<input type="checkbox" name="DG2">DG2</input>
<input type="checkbox" name="DG3">DG3</input>
<input type="checkbox" name="DG4">DG4</input>
<input type="checkbox" name="DG5">DG5</input>
</form>
How can I make the above script to work in IE?
Note that Firefox no longer supports for each loops, so this applies to every browser, not just Internet Explorer. See this MDN article for alternatives.
Internet Explorer doesn't support "for each" loops (along with other modern browsers, which have dropped support for them). You will need to change the code to use regular for loops:
function toggle(source) {
var checkboxes = document.getElementsByName('DG1');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = source.checked;
}
...
}
Or, you could use a library like jQuery and do it like this:
function toggle(source) {
$("input[name^=DG]").attr("checked", source.checked);
}
Or you might try and extend the Array object for browsers that don't support the foreach method on it as suggested here: https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference:Objects:Array:forEach#Compatibility
i think jQuery.each is the best solution for it
var idArr = ["LocationFirst","LocationSecond","LocationThird","LocationFourth","LocationFifth"];
$.each(idArr,function(index, entry) {
//some code
});
it will iterate over all the elements in the array "idArr" and can do some thing with each element.
Natively IE8 is out of date to foreach, but how do I use jQuery, I opted for jQuery.each to overcome this problem.
My copy and paste from jQuery API Doc:
var obj = {
"flammable", "inflammable"
"duh": "no duh"
};
$. each (obj, function (key, value) {
alert (key + ":" + value);
});
It is possible to use a modified form of for each in Internet Explorer, the syntax is as follows.
var checkboxes = document.getElementsByName('DG2');
for (var i in checkboxes)
checkboxes[i].checked = 'true';
I had a problem with forEach on IE 11
And i have found a workaround solution like that
Array.prototype.slice.call(document.getElementsByName('element_name')).forEach(function (el) {
if (el.checked) {
console.log('checked');
}
It is working for me fine.
To complete Matthew Crumley's answer, you may also have a problem with the getElementByName()
failure in IE, explained here:
The little-used
getElementsByName()
method is part of the DOM Level 1 specification and is supported by both Internet Explorer and Mozilla/Firefox. getElementsByName()According to the HTML 4.01 spec, the only elements that support NAME attributes are
BUTTON, TEXTAREA, APPLET, SELECT, FORM, FRAME, IFRAME, IMG, A, INPUT, OBJECT, MAP, PARAM and META
. So to place aNAME
inside aDIV
is actually invalid HTML.
(So it will work in your case (NAME
of an INPUT
field), but it is unsafe to use it in IE)
Moz/Firefox doesn't have a problem with this and will happily return all three DIV elements. But MSIE treats it the invalid
NAME
attribute as an expando attribute and excludes those elements
A possible fix is given with this script.
Note: when you are coding a for
, alwatys add then enclosing curling brackets { and }
: it is safer. If you add a second line of code in your loop, it will be taken into account by the for
block.
I would clean it up a bit.
function select(){
var butt = document.getElementById('selectall');
butt.onclick = selectall;
function selectall(){
for(var i=1;i<6;i++){
var id='DG'+i;
var all = document.getElementById(id);
all.setAttribute('checked','checked');
}
}
}
But It works only for getElementById() (and not getElementsByName(), what I dont understand ). Just add to every input id='selectall', id='DG1'...
You can use:
[].slice.call(...).forEach(...);
example:
[].slice.call( document.querySelectorAll('h1') ).forEach(function(h1) {
console.log(h1);
});
Or better add one times:
// make IE9+ support forEach:
if (window.NodeList && !NodeList.prototype.forEach)
NodeList.prototype.forEach = Array.prototype.forEach;
and then always use compact syntax:
document.querySelectorAll('h1').forEach(function(h1) {
console.log(h1);
});
©2020 All rights reserved.