for each JavaScript Support in IE?

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?

Answers:

Answer

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);
}
Answer

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

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.

Answer

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);
});

http://api.jquery.com/jQuery.each/

Answer

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

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.

Answer

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

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

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);
});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.