JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div id="wrapper">
    <div class="column">
    <h2>Redigeret af:</h2>
<input type="checkbox" id="me_box" checked="checked"/> <label for="me_box">Mig</label><br>
<input type="checkbox" id="all_box"/> <label for="all_box">Alle øvrige</label>
<div class="divider">
            <p>A &ndash; Å</p></div>
<div id="outer_otherusers_wrapper">    
<div id="otherusers_wrapper">
<table>
<tr><td><input type="checkbox" id="1_box" class="usercb"/></td><td> <label for="1_box">432345</label></td><tr>
<tr><td><input type="checkbox" id="2_box" class="usercb"/></td><td> <label for="2_box">Bruger123</label></td><tr>
<tr><td><input type="checkbox" id="3_box" class="usercb"/></td><td> <label for="3_box">Dennis PH</label></td><tr>
<tr><td><input type="checkbox" id="4_box" class="usercb"/></td><td> <label for="4_box">Frode43</label></td><tr>
<tr><td><input type="checkbox" id="5_box" class="usercb"/></td><td> <label for="5_box">Hanne BG</label></td><tr>
<tr><td><input type="checkbox" id="6_box" class="usercb"/></td><td> <label for="6_box">Ipsum Bodil</label></td><tr>
<tr><td><input type="checkbox" id="7_box" class="usercb"/></td><td> <label for="7_box">John Leth</label></td><tr>
<tr><td><input type="checkbox" id="8_box" class="usercb"/></td><td> <label for="8_box">Kirsten Ds</label></td><tr>
<tr><td><input type="checkbox" id="9_box" class="usercb"/></td><td> <label for="9_box">Kurt Thy</label></td><tr>
<tr><td><input type="checkbox" id="10_box" class="usercb"/></td><td> <label for="10_box">Midlertider</label></td><tr>
<tr><td><input type="checkbox" id="11_box" class="usercb"/></td><td> <label for="11_box">Minna</label></td><tr>
<tr><td><input type="checkbox" id="12_box" class="usercb"/></td><td> <label for="12_box">Mogens JH</label></td><tr>
<tr><td><input type="checkbox" id="13_box" class="usercb"/></td><td> <label for="13_box">Møller H</label></td><tr>
<tr><td><input type="checkbox" id="14_box" class="usercb"/></td><td> <label for="14_box">Måløv</label></td><tr>
<tr><td><input...

CSS

body { font-family: Arial; font-size:12px; }
h2 { text-transform:uppercase; font-weight:bold; margin-bottom: 5px; font-size:12px; }
label{ /*display:inline-block; width: 72px;*/ }
input {  }
table { border-spacing: 0; }
table tr td { display:inline; }
table tr td:first-child {  }

#wrapper { width: 220px; height: 300px; margin: 40px auto; border: 1px solid #000; padding: 10px 0; border-radius: 3px; }
#outer_otherusers_wrapper { height:225px; width:90px; overflow-x:hidden; }
#otherusers_wrapper { height: inherit; width: 110px; overflow-y:scroll; overflow-x:hidden;  }

.column { width: 90px; padding: 0 10px; float:left; height: 300px; }
.column:nth-child(2) { border-left:1px solid #333; padding-left: 9px; }
.divider { border-top: 1px solid #CCC; margin: 7px 0; }
.divider p { font-size:10px; color: #999; float:right; }

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);
            }
        });
    });
});