samedi 16 janvier 2021

HTML multiple different 'check all' checkboxes

I have been using the following script to check multiple checkboxes at a time, and all is going well:

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

Some general code where I use this is:

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

This creates a list of 'surface analyses' checkboxes for 00Z, 03Z, 06Z, and an option to select all 3 of these boxes at once. There is another list of the same style but for 'upper air analysis'. This works great the way that this is.

The issue is I now want to create 00Z, 03Z, and 06Z checkboxes. In other words, the 00Z checkbox would mark the 'checkbox_wpc_sfc00' as well as the 'checkbox_wpc_ua00' text. However, I have run into a bit of a wall as I would figure a separate 'toggle' function would work where I use a str.contains('00'), but this seems to be failing. Any thoughts on this? I would like to try and keep this to either HTML or Javascript, if possible.




Aucun commentaire:

Enregistrer un commentaire