JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checkbox-list">
    <label>
        <input type="checkbox" value="" />All items</label>
    <br />
    <label>
        <input type="checkbox" value="1" />First item</label>
    <br />
    <label>
        <input type="checkbox" value="2" />Second item</label>
    <br />
    <label>
        <input type="checkbox" value="3" />Third item</label>
    <br />
    <label>
        <input type="checkbox" value="4" />Forth Checkbox</label>
</div>

JavaScript

$(".checkbox-list").on("change", "input[type=checkbox]", function () {
    if ($(this).first()) { // <- not working - how do I know if I clicked the first one?
        $("input[type=checkbox]:checked", ".checkbox-list").not(this).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        // Uncheck first checkbox
    }
});