在javascript中获取复选框多维数组

Posted 2023-03-05

【中文标题】在javascript中获取复选框多维数组

【英文标题】：fetching checkbox multidimensional array in javascript

【发布时间】：2012-03-17 18:50:35

【问题描述】：

根据要求，我必须如下所述动态创建 xhtml

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

我想在选择其关联的父级别时选中/取消选中所有模块复选框。这是我的 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;
        
    

但是当我显示元素变量然后得到响应“未定义”。

谁能帮忙

【参考方案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;
        
    

【讨论】：

成功了 :) 感谢您的回复。

如果所有嵌套复选框都被选中，您能否让我知道我需要在单独的函数中进行哪些更改以检查***复选框。在我的情况下，***复选框级别 [1] 和嵌套复选框就像课程 [1] [1]、课程 [1] [2]。所以我想要的是，如果我同时选择 course[1][1] 和 course[1][2]，那么我的 javascript 函数应该检查 level[1]。

【参考方案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>

我相信它会有所帮助！