for each JavaScript Support in IE?

Question

Hi,

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 TYPE="CHECKBOX" name="DG2">DG2
<INPUT TYPE="CHECKBOX" name="DG3">DG3
<INPUT TYPE="CHECKBOX" name="DG4">DG4
<INPUT TYPE="CHECKBOX" name="DG5">DG5

<br>
<br>

How can make the cbove script to work in IE

Answer 1

Internet Explorer doesn't support "for each" loops. 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);
}

Edit: Also, the way you are using "for each" might not always do what you want even in Firefox. Like "for (key in object)" loops, "for each" iterates over all the properties of the object including properties from its prototype. It's really made for iterating over object properties, not arrays.

In JavaScript 1.7 you can create an Iterator that works properly with arrays like this:

  for each (let [i, checkbox] in Iterator(checkboxes)) {
      checkbox.checked = source.checked;
  }

Of course, this only works in Firefox 2.0+.

Answer 2

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 a NAME inside a DIV 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.

Answer 3

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'...

Answer 4

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

Answer 5

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';