JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="all">
    <input type="checkbox" id="select_all">
    <label for="select_all">Select all</label>
</div>

<ul>
    <li>
        <input type="checkbox" id="one" class="select_one">
        <label for="one">One</label>
    </li>
    <li>
        <input type="checkbox" id="two" class="select_one">
        <label for="two">Two</label>
    </li>
    <li>
        <input type="checkbox" id="three" class="select_one">
        <label for="three">Three</label>
    </li>
</ul>

CSS

body {
    padding: 10px;
}

#all {
    background-color: #ddd;
    padding: 5px;
}

li {
    padding: 5px;
}

.some_selected {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

JavaScript

$(function () {
    $('#select_all').change (function () {
        //Check/uncheck all the list's checkboxes
        $('.select_one').attr('checked', $(this).is(':checked'));
        //Remove the faded state
        $(this).removeClass('some_selected');
    });
    
    $('.select_one').change (function () {
        if ($('.select_one:checked').length == 0) {
            $('#select_all').removeClass('some_selected').attr('checked', false);
        } else if ($('.select_one:not(:checked)').length == 0) {
            $('#select_all').removeClass('some_selected').attr('checked', true);
        } else {
            $('#select_all').addClass('some_selected').attr('checked', true);
        }
    });     
});