JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div id="wrapper">
    <h2>Redigeret af:</h2>
<input type="checkbox" id="me_box"/> <label for="me_box">Mig</label><br>
<input type="checkbox" id="all_box"/> <label for="all_box">Alle øvrige</label>
<hr/>
<input type="checkbox" id="1_box" class="usercb"/> <label for="1_box">User Hep</label><br>
<input type="checkbox" id="2_box" class="usercb"/> <label for="2_box">Okay TOne</label><br>
<input type="checkbox" id="3_box" class="usercb"/> <label for="3_box">Kurt</label><br>
<input type="checkbox" id="4_box" class="usercb"/> <label for="4_box">Svenne</label><br>
<input type="checkbox" id="5_box" class="usercb"/> <label for="5_box">Lotta</label><br>
<input type="checkbox" id="6_box" class="usercb"/> <label for="6_box">Palle</label><br>
<input type="checkbox" id="7_box" class="usercb"/> <label for="7_box">Banaan</label><br>
<input type="checkbox" id="8_box" class="usercb" /> <label for="8_box">Hopla</label>
   <hasdfh alshflas>jh lh lasd fh 
</div>

CSS

body { font-family: Arial; }
h2 { text-transform:uppercase; font-weight:bold; margin-bottom: 10px; }

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).attr("id") != "me_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).attr("id") != "me_box" && !$(this).is(':checked')) {
                        $(this).attr('checked', true);

                    }
                });
            }
            else {
                elements.each(function() {
                    if ($(this).attr("id") != "me_box") {
                        $(this).attr('checked', false);
                    }
                });
            }


        });

        $('.usercb').click(function() {

            var usercbElements = $("#wrapper").find("input.usercb");
            var allUsercbChecked = true;

            usercbElements.each(function() {
                if (!$(this).is(':checked')) {
                    allUsercbChecked = false;
                    return false;
                }
            });
            if (allUsercbChecked) {
                $('#all_box').attr('checked', true);
            }
            else {
                $('#all_box').attr('checked', false);
            }
        });
    });
});