取複選框多維數組以JavaScript

Question

按要求我有下面

<ul class="checklist"> 
    <li> 
     <input type="checkbox" name="level[1]" value="1" onclick="checkAll(this)" id="level[1]"> 
     <label for="level[1]">Unit 1</label> 
     <ul class="subchecklist"> 
      <li> 
       <input type="checkbox" checked="checked" name="courses[1][1]" value="1" onclick="checkTop()" id="courses[1][1]"> 
       <label for="courses[1][1]">Module 1</label> 
      </li> 
      <li> 
       <input type="checkbox" checked="checked" name="courses[1][2]" value="2" onclick="checkTop()" id="courses[1][2]"> 
       <label for="courses[1][2]">Module 2</label> 
      </li> 

     </ul> 
    </li> 
     <li> 
     <input type="checkbox" name="level[2]" value="2" onclick="checkAll(this)" id="level[2]"> 
     <label for="level[2]">Unit 2</label> 
     <ul class="subchecklist"> 
      <li> 
       <input type="checkbox" checked="checked" name="courses[2][1]" value="1" onclick="checkTop()" id="courses[2][1]"> 
       <label for="courses[2][1]">Module 1</label> 
      </li> 
      <li> 
       <input type="checkbox" checked="checked" name="courses[2][2]" value="2" onclick="checkTop()" id="courses[2][2]"> 
       <label for="courses[2][2]">Module 2</label> 
      </li> 

     </ul> 
    </li> 
</ul> 

我想檢查/取消選擇其相關聯的父級別的選擇所有模塊複選框如所描述的動態創建的XHTML。這是我的javascript功能。

function checkAll(obj){ 
    var element = document.accessForm.elements["courses["+obj.value+"]"]; 
    alert(element);  
    if(obj.checked){ 
     for(i=0;i<element.length;i++){ 
      element[i].checked = true; 
     } 
    }else{ 
     for(i=0;i<element.length;i++){ 
      element[i].checked = false; 
     } 
    } 
} 

但是，當我顯示元素變量，然後得到響應「未定義」。

任何人可以請幫助

Answer 1

使用此功能：

function checkAll(obj){ 
    var element = []; 
    var inputs = document.getElementsByTagName("input"); 
    for(var i = 0; i < inputs.length; i++) 
    { 
     if(inputs[i].name.indexOf('courses[' + obj.value + ']') == 0) 
     { 
      element.push(inputs[i]); 
     } 
    } 

    if(obj.checked){ 
     for(i=0;i<element.length;i++){ 
      element[i].checked = true; 
     } 
    }else{ 
     for(i=0;i<element.length;i++){ 
      element[i].checked = false; 
     } 
    } 
} 

Answer 2

添加此功能，您的代碼：

function checkTop(obj) 
{ 
    var temp = obj.name; 
    var first_index1 = temp.indexOf('['); 
    var first_index2 = temp.indexOf(']'); 
    temp = temp.substring(first_index1 + 1, first_index2); 

    var element = []; 
    var inputs = document.getElementsByTagName("input"); 
    for(var i = 0; i < inputs.length; i++) 
    { 
     if(inputs[i].name.indexOf('courses[' + temp + ']') == 0) 
     { 
      element.push(inputs[i]); 
     } 
    } 

    var count_checked = 0; 
    var count_not_checked = 0; 
    for(var i = 0; i < element.length; i++) 
    { 
     if (element[i].checked) 
      count_checked++; 
     else 
      count_not_checked++; 
    } 

    var parent = document.getElementById("level[" + temp + "]"); 
    if (count_checked == element.length) 
    { 
     parent.checked = true; 
    } 
    if (count_not_checked == element.length) 
    { 
     parent.checked = false; 
    } 
} 

，並更改HTML代碼如下：

<ul class="checklist"> 
    <li> 
     <input type="checkbox" name="level[1]" value="1" onclick="checkAll(this)" id="level[1]"> 
     <label for="level[1]">Unit 1</label> 
     <ul class="subchecklist"> 
      <li> 
       <input type="checkbox" checked="checked" name="courses[1][1]" value="1" onclick="checkTop(this)" id="courses[1][1]"> 
       <label for="courses[1][1]">Module 1</label> 
      </li> 
      <li> 
       <input type="checkbox" checked="checked" name="courses[1][2]" value="2" onclick="checkTop(this)" id="courses[1][2]"> 
       <label for="courses[1][2]">Module 2</label> 
      </li> 

     </ul> 
    </li> 
     <li> 
     <input type="checkbox" name="level[2]" value="2" onclick="checkAll(this)" id="level[2]"> 
     <label for="level[2]">Unit 2</label> 
     <ul class="subchecklist"> 
      <li> 
       <input type="checkbox" checked="checked" name="courses[2][1]" value="1" onclick="checkTop(this)" id="courses[2][1]"> 
       <label for="courses[2][1]">Module 1</label> 
      </li> 
      <li> 
       <input type="checkbox" checked="checked" name="courses[2][2]" value="2" onclick="checkTop(this)" id="courses[2][2]"> 
       <label for="courses[2][2]">Module 2</label> 
      </li> 

     </ul> 
    </li> 
</ul> 

我相信它有幫助！