如何在JavaScript中获取选中父复选框下的选中子复选框值

我有一组带子复选框的动态父复选框，希望仅获取选中父复选框下的选中子复选框的值。尝试用document.querySelectorAll()获取所有选中的父复选框，并用forEach循环遍历，但始终无法正确获取选中子复选框的数组来遍历取值，陷入困境。

现有代码 #

HTML代码 #

<div>
    <div class="main-parent">                                 
        <input class="main-checkbox" type="checkbox">   
        <div>
            <div>
                <input class="sub-checkbox" type="checkbox" value="子选项1-1">
            </div>
            <div>
                <input class="sub-checkbox" type="checkbox" value="子选项1-2">
            </div>
            <div>
                <input class="sub-checkbox" type="checkbox" value="子选项1-3">
            </div>
         </div>
    </div>
    <div class="main-parent">                                 
        <input class="main-checkbox" type="checkbox">   
        <div>
            <div>
                <input class="sub-checkbox" type="checkbox" value="子选项2-1">
            </div>
            <div>
                <input class="sub-checkbox" type="checkbox" value="子选项2-2">
            </div>
            <div>
                <input class="sub-checkbox" type="checkbox" value="子选项2-3">
            </div>
         </div>
    </div>
    <div class="main-parent">                                 
        <input class="main-checkbox" type="checkbox">   
        <div>
            <div>
                <input class="sub-checkbox" type="checkbox" value="子选项3-1">
            </div>
            <div>
                <input class="sub-checkbox" type="checkbox" value="子选项3-2">
            </div>
            <div>
                <input class="sub-checkbox" type="checkbox" value="子选项3-3">
            </div>
         </div>
    </div>
</div>

（注：给子复选框补充了value属性，方便获取实际业务值）

原有JavaScript代码 #

var test_names= document.querySelectorAll("input[class='main-checkbox']:checked");
    
test_names.forEach(function(test_name) {
    var testname = test_name.innerHTML;
    var parentdiv = test_name.parentElement.parentElement.parentElement;
    if(parentdiv != null || parentdiv != undefined) {
        console.log('parentdiv',parentdiv)
    var childtestbutton = parentdiv.lastElementChild;
    
        if(childtestbutton != null || childtestbutton != undefined) {
            var childtestprof = parentdiv.lastElementChild.previousElementSibling.lastElementChild.lastElementChild.value;
            var childtestchecked = parentdiv.lastElementChild.previousElementSibling.firstElementChild.firstElementChild;
            
            if(childtestchecked != null || childtestchecked != undefined) {
                console.log(childtestchecked)
                console.log(childtestchecked.checked)
                if(childtestchecked.checked == true && childtestchecked.checked != null || childtestchecked.checked != undefined) {
                    console.log('lengtha',childtestchecked.nextElementSibling.innerHTML)
                    var nnc = document.querySelectorAll("input[class='c-g-t-l-p']:checked");
                    console.log('nnc',nnc)
                    // var array = []
                    // for (var i = 0; i < childtestchecked.length; i++) {
                    //   array.push(checkboxes[i].value)
                    // }
                    // console.log('button',childtestprof)
                    // console.log('childtestnames',childtestnames)   
                    
                }
            }else {
                console.log('box not checked');
            }
            
        }
    }else {
        console.log('no parent div')
    }
});

解决方案 #

你的核心问题是DOM遍历逻辑混乱，没必要多层嵌套调用parentElement或previousElementSibling，直接利用父复选框的容器关联关系即可精准定位子元素。

修改后的JavaScript代码：

// 用于存储最终选中的子复选框值
const selectedSubValues = [];

// 获取所有已勾选的父复选框
const checkedParentBoxes = document.querySelectorAll('.main-checkbox:checked');

checkedParentBoxes.forEach(parentBox => {
    // 直接定位当前父复选框所在的父容器
    const parentContainer = parentBox.closest('.main-parent');
    if (!parentContainer) return;
    
    // 仅在当前父容器内查找已勾选的子复选框
    const checkedSubBoxes = parentContainer.querySelectorAll('.sub-checkbox:checked');
    
    // 遍历收集子复选框的值
    checkedSubBoxes.forEach(subBox => {
        if (subBox.value) {
            selectedSubValues.push(subBox.value);
        }
    });
});

console.log('选中的子复选框值：', selectedSubValues);

关键说明 #

• 使用closest('.main-parent')可以直接定位到最近的父级容器，避免多层DOM遍历的错误
• 在容器范围内调用querySelectorAll，确保只获取当前选中父容器下的选中子复选框
• 最终将所有符合条件的值存入数组，方便后续业务处理

内容的提问来源于stack exchange，提问作者charlyo