fetching checkbox multidimensional array in javascript

Question

As per the requirement i have to create xhtml dynamically 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 module checkboxes on the selection of its associated 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 element variable then get the response "Undefined".

Can anybody please help

samra · Accepted Answer · 2012-02-28 20:38:21Z

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

answered Feb 28, 2012 at 20:38

samra

1801 gold badge4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neeraj Over a year ago

Can you also let me know what changes i will need to make in a separate function to check the top level checkbox if all the nested checkbox are selected. In my case top level checkbox level[1] and nested checkbox are like courses[1][1], courses[1][2]. So i want is if i select both course[1][1] and course[1][2] then my javascript function should check level[1].

samra · Accepted Answer · 2012-03-01 10:11:29Z

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 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'm sure it helps!

Collectives™ on Stack Overflow

fetching checkbox multidimensional array in javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related