如何在JS中点击一个Div子元素选中另一个Div的所有复选框

问题背景 #

点击页面中的“全选”图片时，需要选中页面内所有名为pestname的复选框，但目标复选框位于独立的Div容器中，尝试使用this.parentElement.children无法正确定位元素，现有JS函数写法存在错误。

现有代码 #

CSS

.box {
    background:red;
    padding:10px;
    width:200px;
    display:none;
}

.toggle-check-group {
    margin-top: 10px;
    padding: 0px 0px;
    margin-bottom: 20px;
}

.switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.slider {
    cursor: url('../img/pest_cursor.svg'), move !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    -webkit-transition: .1s;
    transition: .1s;
    text-align: center;
    margin: auto;
    padding: 5px 10px;
    border: 1px solid #707070;
    border-radius: 5px;
    font-size: .8rem;
    margin-right: 10px;
    transition: top .1s;
}

.slider:hover {
    top: -5px;
}

input:checked + .slider {
    color: #188a80;
    background-color: #daf1ef;
    border: 1px solid #188a80;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

.slider::selection {
    color: none;
    background: none;
}
/* For Mozilla Firefox */
.slider::-moz-selection {
    color: none;
    background: none;
}

/* For Mozilla Firefox */
.slider::-webkit-selection {
    color: none;
    background: none;
}

HTML

<div class="card">
    <div class="card-header " id="Div1">
        <h5 class="mb-0 ">
            <a class="btn-link " data-toggle="collapse" data-target="#cp2" aria-expanded="true" aria-controls="collapsecroptwo">Select All
                <img src="select_all.png" class="check-all " onclick="CheckUnCheckAllselect(this)" />
            </a>
        </h5>
    </div>

    <div id="Div2" class="collapse show" aria-labelledby="headingcroptwo" data-parent="#accordion" style="">
        <div class="card-body">
            <div id="Div3" class="category-list list-style-none">
                <ul>
                    <li>
                        <div class="toggle-check-group">
                            <label class="switch">
                                <input type="checkbox" name="pestname" title="3" class="myinput" onclick="CheckUnCheckAll()"><span class="slider" name="pname" title="PNAME">Option-1</span></label>
                            <label class="switch">
                                <input type="checkbox" name="pestname" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-2</span></label>
                            <label class="switch">
                                <input type="checkbox" name="pestname" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-3</span></label>
                            <label class="switch">
                                <input type="checkbox" name="pestname" title="3" class="myinput" onclick="CheckUnCheckAll(); "><span class="slider" name="pname" title="PNAME">Option-4</span></label>
                        </div>
                    </li>
                    <li>
                        <div class="toggle-check-group">
                            <label class="switch">
                                <input type="checkbox" name="pestname" title="3" class="myinput" onclick="CheckUnCheckAll()"><span class="slider" name="pname" title="PNAME">Option-1</span></label>
                            <label class="switch">
                                <input type="checkbox" name="pestname" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-2</span></label>
                            <label class="switch">
                                <input type="checkbox" name="pestname" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-3</span></label>
                            <label class="switch">
                                <input type="checkbox" name="pestname" title="3" class="myinput" onclick="CheckUnCheckAll(); "><span class="slider" name="pname" title="PNAME">Option-4</span></label>
                        </div>
                    </li>
                    <li>
                        <div class="toggle-check-group">
                            <label class="switch">
                                <input type="checkbox" name="pestname" title="3" class="myinput" onclick="CheckUnCheckAll()"><span class="slider" name="pname" title="PNAME">Option-1</span></label>
                            <label class="switch">
                                <input type="checkbox" name="pestname" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-2</span></label>
                            <label class="switch">
                                <input type="checkbox" name="pestname" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-3</span></label>
                            <label class="switch">
                                <input type="checkbox" name="pestname" title="3" class="myinput" onclick="CheckUnCheckAll(); "><span class="slider" name="pname" title="PNAME">Option-4</span></label>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

修正后的JavaScript实现 #

原函数存在两个核心问题：this指向错误（全局函数中this默认指向window），以及DOM元素定位逻辑错误。以下是修正后的代码：

function CheckUnCheckAllselect(elem) {
    // 通过传入的全选图片元素，找到所属的card容器
    const card = elem.closest('.card');
    // 获取容器内所有name为pestname的复选框
    const checkboxes = card.querySelectorAll('input[name="pestname"]');
    
    // 判断当前是否已全选，实现全选/反选切换
    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
    checkboxes.forEach(cb => {
        cb.checked = !allChecked;
    });
}

关键说明 #

1. 元素定位：使用closest('.card')从点击的图片元素向上查找最近的.card容器，确保只操作当前卡片内的复选框，避免影响页面其他区域的元素。
2. 全选/反选逻辑：先通过every判断所有复选框是否已选中，再统一设置所有复选框的状态，实现点击一次全选，再次点击取消全选的功能。
3. 参数优化：简化了原onclick中的冗余参数，仅传入this即可完成元素定位。

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