JSFiddle - React, Tailwind, and code Playground

HTML

<a id="selectAll">Select All</a>

<div>
    <div class="Col-Liste">
        <input id="chk1" type="checkbox" checked="checked" />
        <label for="chk1" >Checkbox1</label>
    </div>
    <div class="Col-Liste">
        <input id="chk2"  type="checkbox" />
        <label for="chk2" >Checkbox2</label>
    </div>
    <div class="Col-Liste">
        <input id="chk3"  type="checkbox" />
        <label for="chk3" >Checkbox3</label>
    </div>
</div>

CSS

#selectAll {
    cursor:pointer;
}

JavaScript

$(function () {
    $("#selectAll").on('click', function () {

        var inputs = $(this).parent().find(":checkbox");
        var checkedInputs = $(this).parent().find(":checkbox:checked");
        check = ($(this).text() == "Select All")
        done = (check && checkedInputs.length < 3) || (!check || checkedInputs.length == 0);
        if (done) {
            inputs.prop('checked', check);
            $(this).text(check ? "Uncheck All" : "Select All")
        }
    })

    $("input").on('change', function () {
        var checkedInputs = $(this).parent().parent().find(":checkbox:checked").length;
        switch (checkedInputs) {
            case 0:
                $('#selectAll').text("Select All");
                break;
            case 3:
                $('#selectAll').text("Uncheck All");
                break;

        }
    })
});