Javascript Checking ne fonctionne pas dans IE7

Question

Je le code HTML suivant modifié pour être plus courte et plus compréhensible:

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

Au nom 4-9-10, 4 représente le type d'utilisateur, si elle est inférieure à 4 un utilisateur est responsible . 9 signifie ID de service et 10 signifie ID de personnel.

Lorsque je clique sur la case à cocher All, toutes les cases sont cochées:

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

Lorsque je clique sur la case Resp, sont vérifiées toutes les cases des Personnels responsables:

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

Lorsque je clique sur un département case à cocher, les cases à cocher des employés du département sont cochées:

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

J'ai 3 départements et le nombre variable de personnel dans ceux-ci. Tout fonctionne très bien dans Firefox, Chrome et Yandex. Cependant, cela ne fonctionne que partiellement dans IE7. Par exemple, lorsque j'appuie sur All, seuls les départements responsables et les départements sont vérifiés, un département n'est pas vérifié du tout. Responsible vérifier et Department fonctionne partiellement, aussi.

Ma question est la suivante: y a-t-il dans mes codes une fonction ou un élément HTML qui n'est pas compatible avec les versions antérieures d'IE7?

Answer 1

vous verrez le problème dès que vous ouvrez votre débogueur dans IE 7 - appuyez sur F12

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

IE n'aime pas '9' comme ID et il jette une exception quand il fonctionne inputs[i] avec 9 l'ID

Comme mplungjan mentionné, de son mieux pour modifier votre JavaScript comme ci-dessous. Seulement modifié le premier si

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

Answer 2

S'il vous plaît ne jamais utiliser for in boucles lorsque vous itérer sur des collections et des tableaux

Vous devriez toujours utiliser

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

avec des tableaux et des collections qui document.getElementsByTagName est