JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div id="wrapper">
<input type="checkbox" id="me_box"/> <label for="me_box">Mig</label><br>
<input type="checkbox" id="all_box"/> <label for="all_box">Alle</label>
<hr/>
<input type="checkbox" id="1_box"/> <label for="1_box">User Hep</label><br>
<input type="checkbox" id="2_box"/> <label for="2_box">Okay TOne</label><br>
<input type="checkbox" id="3_box"/> <label for="3_box">Kurt</label><br>
<input type="checkbox" id="4_box"/> <label for="4_box">Svenne</label><br>
<input type="checkbox" id="5_box"/> <label for="5_box">Lotta</label><br>
<input type="checkbox" id="6_box"/> <label for="6_box">Alle</label><br>
<input type="checkbox" id="7_box"/> <label for="7_box">Banaan</label><br>
<input type="checkbox" id="8_box"/> <label for="8_box">Hopla</label>
    
</div>

JavaScript

$(document).ready(function() {
    $(function() {
        $('#all_box').click(function() {

            var atLeastOneNotChecked = false;
            var elements = $("#wrapper").find("input");

            //Find out if at least one isn't selected
            elements.each(function() {

                if ($(this).attr("id") != "all_box" && !$(this).is(':checked')) {
                    atLeastOneNotChecked = true;
                    //that's all we need to know, so break out of the loop
                    return false;
                }

            });

              if (atLeastOneNotChecked) {
                  elements.each(function () {
                                    
                     if (!$(this).is(':checked')) {
                         $(this).attr('checked', true);

                     }
                 });
             }
            else {
                elements.each(function () {  $(this).attr('checked', false);             }); }

            
/*            if ($(this).is(':checked')) {
                $("#wrapper").find("input").attr('checked', true);
            }
            else {
                $("#wrapper").find("input").attr('checked', false);
            }*/
        });
    });
});