Button to Toggle All Checkboxes with Javascriptt

<input type="checkbox" id="Dict.cc" name="dictionaries" class="dictionaries" value="Dict.cc" checked="">

        <label for="Dict.cc"><span class="dicname">Dict.cc</span></label>

        

        <input type="checkbox" id="Linguee.com" name="dictionaries" class="dictionaries" value="Linguee.com" checked="">

        <label for="Linguee.com"><span class="dicname">Linguee.com</span></label>

        

        <input type="checkbox" id="IATE" name="dictionaries" class="dictionaries" value="IATE" checked="">

        <label for="IATE"><span class="dicname">IATE</span></label>

        

        <input type="checkbox" id="SAP" name="dictionaries" class="dictionaries" value="SAP" checked="">

        <label for="SAP"><span class="dicname">SAP</span></label>

        

        <input type="checkbox" id="Euroterm" name="dictionaries" class="dictionaries" value="Euroterm" checked="">

        <label for="Euroterm"><span class="dicname">Euroterm</span></label>

        

        <input type="checkbox" id="PONS" name="dictionaries" class="dictionaries" value="PONS" checked="">

        <label for="PONS"><span class="dicname">PONS</span></label>

       

        <input type="checkbox" id="DWDS" name="dictionaries" class="dictionaries" value="DWDS" checked="">

        <label for="DWDS"><span class="dicname">DWDS</span></label>

        

        <button type="button" id="toggleButton" title="Toggle all languages" onclick=">

        Toogle</button>

 

<script type="text/javascript">
    document.getElementById('toggleButton').addEventListener('click', function() {
        // Get all checkboxes
        var checkboxes = document.getElementsByClassName('dictionaries');
        // Determine if we are checking or unchecking. We're checking the first checkbox's checked property to determine if we are checking or unchecking. If it's checked, we'll uncheck all boxes. If it's unchecked, we'll check all boxes
        var check = checkboxes[0].checked ? false : true;
        // Loop through each checkbox and set its checked property
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = check;
        }
    });
</script>

or directly

<button type="button" id="toggleButton" title="Toggle all"

        onclick="

        var checkboxdictionaries = document.getElementsByName('dictionaries');

        var check = checkboxdictionaries[0].checked ? false : true;

        for (var i = 0; i < checkboxdictionaries.length; i++) {

            checkboxdictionaries[i].checked = check;

        }">

The line var check = checkboxes[0].checked ? false : true; is using a ternary operator. This operator is a shorthand for the if...else statement and is used for making the code more concise freecodecamp.org, programiz.com, geeksforgeeks.org, stackabuse.com, javascripttutorial.net.

The ternary operator is made up of three parts: a condition, an expression to execute if the condition is true, and an expression to execute if the condition is false. Its syntax is condition ? exprIfTrue : exprIfFalse developer.mozilla.org, freecodecamp.org, programiz.com.

In the line you provided, checkboxes[0].checked is the condition. This checks if the first checkbox in the checkboxes array is checked. If it is, the expression after the ? is executed and false is assigned to the check variable. If it's not checked, the expression after the : is executed and true is assigned to the check variable freecodecamp.org, programiz.com, geeksforgeeks.org.

Essentially, this line of code is toggling the state of the checkboxes. If the first checkbox is checked, it sets check to false to uncheck all checkboxes. If it's not checked, it sets check to true to check all checkboxes.

function togglecheckboxes(name) {

    var checkboxitems = document.getElementsByName(name);

    var check = checkboxitems[0].checked ? false : true;

    for (var i = 0; i < checkboxitems.length; i++) {

        checkboxitems[i].checked = check;

    }

}