Javascript Checking doesn't Work in IE7

Question

I have the following HTML edited to be shorter and more understandable:

<input type='checkbox' name='All' value='All' id='All' onclick='toggleAll(this)'/>
    <label for='All'> Everyone</label>
<input type='checkbox' name='Resp' value='Resp' id='Resp' onclick='toggleResp(this)'/>
    <label for='Resp'> Responsibles</label>
<input type='checkbox' name='9' value='9' id='9' onclick='toggleDept(this)' />
    <label for='9'> Department 9</label>
<input type='checkbox' name='3-9-9' value='3-9-9' id='3-9-9' />
    <label for='3-9-9'> Responsible Personnel 9</label>
<input type='checkbox' name='4-9-10' value='4-9-10' id='4-9-10' />
    <label for='4-9-10'> General Personnel 10</label>
<input type='checkbox' name='4-9-11' value='4-9-11' id='4-9-11' />
    <label for='4-9-11'> General Personnel 11</label>

In the name 4-9-10, 4 stands for user type, if it's below 4 a user is responsible. 9 stands for department ID and 10 stands for personnel ID.

When I click on the checkbox All, all of the checkboxes are checked:

function toggleAll(source) {
    inputs = document.getElementsByTagName("input");
    for (var i in inputs) {
        if(inputs[i].type == "checkbox") {
            inputs[i].checked = source.checked;
        }
    }
}

When I click on the checkbox Resp, all of the responsible personnels' checkboxes are checked:

function toggleResp(source) {
    inputs = document.getElementsByTagName("input");
    for (var i in inputs) {
        if (inputs[i].type == "checkbox") {
            if(parseInt(inputs[i].name.substring(0, inputs[i].name.indexOf("-"))) < 4)
                inputs[i].checked = source.checked;
        }
    }
}

When I click on a department checkbox, department's personnels' checkboxes are checked:

function toggleDept(source) {
    inputs = document.getElementsByTagName("input");
    deptId = source.name;
    for (var i in inputs) {
        if (inputs[i].type == "checkbox") {
            index = inputs[i].name.indexOf("-");
            lastIndex = inputs[i].name.lastIndexOf("-");
            iDeptId = inputs[i].name.substring(index + 1, lastIndex);
            if (index != -1 && iDeptId == deptId.toString())
                inputs[i].checked = source.checked;
        }
    }
}

I have 3 departments and varying number of personnel in those. Everything works great in Firefox, Chrome and Yandex. However, this only partially works in IE7. For example, when I press on All, only department responsibles and departments are checked, a department isn't checked at all. Responsible check and Department works partially, too.

My question is: Is there a function or HTML element here in my codes which isn't compatible with earlier versions of IE7?

`for (var i in inputs) {` is highly suspect and should be a for (...) loop — mplungjan, Apr 06 '13 at 06:54
@mplungjan I suspected that too, I wrote that line according to this question's accepted answer: http://stackoverflow.com/questions/386281/how-to-implement-select-all-check-box-in-html — İsmet Alkan, Apr 06 '13 at 06:55
@IsmetAlkan too bad at least one person upvoted that answer exactly because it used that "obscure construct" that turned out to be quite problematic for arrays. — John Dvorak, Apr 06 '13 at 06:58
@mplungjan I thought of summoning a downvote squad from the javascript room instead :-/ — John Dvorak, Apr 06 '13 at 07:02
Lol - I sort of agree. Very strange the code which I believe is JS 1.6 was accepted so easily — mplungjan, Apr 06 '13 at 07:04

score 2 · Accepted Answer · edited Apr 06 '13 at 16:31

2

you will see the problem as soon as you open your debugger in IE 7 - press F12

'inputs[...].type' is null or not an object

IE does not like '9' as the ID and it throws an exception when it runs inputs[i] with 9 as the ID

As mplungjan mentioned, its better to modify your JavaScript as below. Only modified the first one though

function toggleAll(source) {
    inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        var input = inputs[i];
        if(input.type == "checkbox") {
            input.checked = source.checked;
        }
    }
}

edited Apr 06 '13 at 16:31

mplungjan

169,008
28
173
236

answered Apr 06 '13 at 07:05

Jason Jong

4,310
2
25
33

Well spotted, was only looking at the for loop but numerical ids are html5 – mplungjan Apr 06 '13 at 08:35

score 1 · Answer 2 · answered Apr 06 '13 at 06:55

1

Please never use for in loops when you iterate over collections and arrays

You should always use

for (var i=0, n=collection.length;i<n;i++)

with arrays and collections which document.getElementsByTagName is

answered Apr 06 '13 at 06:55

mplungjan

169,008
28
173
236

You're the first answerer, but this line doesn't work I guess. Sorry, but I have to answer Jason Jong's answer, which I already wrote before his answer and according to your answer :) – İsmet Alkan Apr 06 '13 at 07:07
@IsmetAlkan - Takes time to investigate and give a full answer – Jason Jong Apr 06 '13 at 07:12
I don't mean to be offensive, you already earned +25 rep from me for your effort. :) – İsmet Alkan Apr 06 '13 at 07:13

Javascript Checking doesn't Work in IE7

2 Answers2