Fetching a multidimensional checkbox array in javascript

Question

As per requirement, I have to dynamically create xhtml as described below

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

I want to check / Uncheck all modules to select the appropriate parent level. Here is my javascript function.

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

But when I display the element variable, we get the answer "Undefined".

Can anybody help

Answer 1

use this function:

 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

add this function to your code:

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

and change the html code to this:

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

I am sure this helps!