HTML 多个不同的'check all'复选框

Question

我一直在使用下面的脚本一次选中多个复选框，并且一切都很顺利:

    <script type="text/javascript">
    function toggle(source) {
        var aInputs = document.getElementsByTagName('input');
        for (var i=0;i<aInputs.length;i++) {
            if (aInputs[i] != source && aInputs[i].className == source.className) {
                aInputs[i].checked = source.checked;
            }
        }
    }
    </script>

我使用这个的一般代码是:

...
    <li>surface analysis</li>
    <input type="checkbox" id="checkbox_wpc_sfc00" class="wpc_sfc">00Z 
    <input type="checkbox" id="checkbox_wpc_sfc03" class="wpc_sfc">03Z 
    <input type="checkbox" id="checkbox_wpc_sfc06" class="wpc_sfc">06Z 
    <input type="checkbox" class="wpc_sfc" onClick="toggle(this)"> Toggle All surface
    
    <li>upper air analysis</li>
    <input type="checkbox" id="checkbox_wpc_ua00" class="wpc_ua">00Z 
    <input type="checkbox" id="checkbox_wpc_ua03" class="wpc_ua">03Z 
    <input type="checkbox" id="checkbox_wpc_ua06" class="wpc_ua">06Z 
    <input type="checkbox" class="wpc_ua" onClick="toggle(this)"> Toggle All upper air
...
    

这将为00Z、03Z、06Z创建一个"表面分析"复选框列表，并提供一次选择所有这3个复选框的选项。还有另一个相同样式的列表，但用于"高空分析"。这样做效果很好。

问题是我现在要创建00Z, 03Z和06Z复选框。换句话说，00Z复选框将标记'checkbox_wpc_sfc00'以及'checkbox_wpc_ua00'文本。然而，我遇到了一堵墙，因为我认为一个单独的"切换"函数可以在我使用str.contains('00')的地方工作，但这似乎是失败的。对此有什么想法吗?如果可能的话，我想尝试将此保留为HTML或Javascript。

Answer 1

我认为这应该可以完成工作:

    function toggle(source, aux) {
        var aInputs = document.getElementsByTagName('input');
        
        if (aux != "surface and air"){
            for (var i=0; i<aInputs.length; i++) {
                if (aInputs[i] != source && aInputs[i].className == source.className) {
                    aInputs[i].checked = source.checked;
                }
            }
        } else {
            var sSelection = source.id;
            var sType = sSelection.slice(-2);
            var sCheckBox, sLast2;
            
            for (var i=0; i<aInputs.length; i++) {
                sCheckBox = aInputs[i].id;
                sLast2 = sCheckBox.slice(-2);            
                if (sLast2 == sType) {
                    aInputs[i].checked = source.checked;
                }
            }
        }
    }

    <li>surface analysis</li>
    <input type="checkbox" id="checkbox_wpc_sfc00" class="wpc_sfc">00Z 
    <input type="checkbox" id="checkbox_wpc_sfc03" class="wpc_sfc">03Z 
    <input type="checkbox" id="checkbox_wpc_sfc06" class="wpc_sfc">06Z 
    <input type="checkbox" class="wpc_sfc" onClick="toggle(this, 'surface')"> Toggle All surface
    
    <li>upper air analysis</li>
    <input type="checkbox" id="checkbox_wpc_ua00" class="wpc_ua">00Z 
    <input type="checkbox" id="checkbox_wpc_ua03" class="wpc_ua">03Z 
    <input type="checkbox" id="checkbox_wpc_ua06" class="wpc_ua">06Z 
    <input type="checkbox" class="wpc_ua" onClick="toggle(this, 'air')"> Toggle All upper air
    
    <li>general type selection</li>
    <input type="checkbox" id="checkbox_wpc_00" class="wpc_00" onClick="toggle(this, 'surface and air')">00Z 
    <input type="checkbox" id="checkbox_wpc_03" class="wpc_03" onClick="toggle(this, 'surface and air')">03Z 
    <input type="checkbox" id="checkbox_wpc_06" class="wpc_06" onClick="toggle(this, 'surface and air')">06Z 

Answer 2

您当前的方法是传递"主复选框";作为唯一参数，并在控制函数中使用从中提取的值。这似乎没有必要。如果这不是你认为实现你的目标最方便的方式，请评论，以便我提供一个更好的解决方案。

function toggle(selector, state) {
    Array.from(
        document.querySelectorAll(selector)
    ).forEach(
        (element)=>element.checked = state
    )
}

与您当前的实现相比，它期望根据您的"主"复选框传递值，而不是传递复选框本身。我还使用了数组函数，而不是显式循环，我还使用了箭头函数。如果你不熟悉，我可以提供参考。

的用法如下:

<li>surface analysis</li>
<input type="checkbox" id="checkbox_wpc_sfc00" class="wpc_sfc">00Z 
<input type="checkbox" id="checkbox_wpc_sfc03" class="wpc_sfc">03Z 
<input type="checkbox" id="checkbox_wpc_sfc06" class="wpc_sfc">06Z 
<input type="checkbox" class="wpc_sfc" onClick="toggle(`.${this.className}`,this.checked)"> Toggle All surface
<li>upper air analysis</li>
<input type="checkbox" id="checkbox_wpc_ua00" class="wpc_ua">00Z 
<input type="checkbox" id="checkbox_wpc_ua03" class="wpc_ua">03Z 
<input type="checkbox" id="checkbox_wpc_ua06" class="wpc_ua">06Z 
<input type="checkbox" class="wpc_ua" onClick="toggle(`.${this.className}`,this.checked)"> Toggle All upper air
<li>Toggle Region</li>
<input type="checkbox" class="all_00Z" onClick="toggle(`[id$='00']`,this.checked)">
<input type="checkbox" class="all_03Z" onClick="toggle(`[id$='03']`,this.checked)">
<input type="checkbox" class="all_06Z" onClick="toggle(`[id$='06']`,this.checked)">

上面的使用字符串模板和表达式匹配选择器。同样，如果你对这些不熟悉，我可以帮你找一些参考资料。