JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Console</h2>

<div id="console"></div>
<div id="content">
    <form>
        <input class="checkbox_all" type="checkbox" id="all" />
        <label for="all">All animals are present</label>
        <input class="table_checkbox" type="checkbox"
        id="cat" />
        <label for="cat">Cat</label>
        <input class="table_checkbox" type="checkbox" id="dog" />
        <label for="dog">Dog</label>
        <input class="table_checkbox" type="checkbox" id="cow" />
        <label for="cow">Cow</label>
        <input class="table_checkbox" type="checkbox" id="chicken"
        />
        <label for="chicken">Chicken</label>
    </form>
</div>

CSS

div {
    border: 1px solid black;
}
#console {
    background: #DDF;
}
#console h2 {
    font-size: 1.5em;
}

JavaScript

var selected = {};
function log(msg) {
    $("#console").append("<pre>" + msg + "</pre>");
}

function showSelected() { 
    $("#console").empty();
    $("#console").append("{<br />");
    $.each(selected, function (index, obj) {
        $("#console").append(index + ",<br />");
    });
    $("#console").append("}");
}

$(function () {
    $(".checkbox_all").click(function () {
        if ($(this).prop("checked")) {
            $.each($(".table_checkbox"), function (index, checkbox) {
                $(checkbox).prop("checked", true);
                selected[$(checkbox).prop("id")] = true;
            });
        } else {
            $.each($(".table_checkbox"), function (index, checkbox) {
                $(checkbox).prop("checked", false);
            });
            selected = {};
        }
        showSelected();
    });
    $(".table_checkbox").click(function () {
        if ($(this).prop("checked")) {
            selected[$(this).prop("id")] = true;
        } else {
            if (selected[$(this).prop("id")]) {
                delete selected[$(this).prop("id")];
            }
        }
        showSelected();
    });
});