JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<form>
    <label>
        <input name="noStuff" type="checkbox" checked />No Stuff</label>
    <label>
        <input name="stuff1" type="checkbox" />Stuff 1</label>
    <label>
        <input name="stuff2" type="checkbox" />Stuff 2</label>
    <label>
        <input name="stuff3" type="checkbox" />Stuff 3</label>
</form>

CSS

label {
    display:block;
}

JavaScript

$('input[name="noStuff"]').change(function () {
    if ($(this).is(":checked")) $('input[name^="stuff"]').prop('checked', false)
})
$('input[name^="stuff"]').change(function () {
    $('input[name="noStuff"]').prop('checked', !$('input[name^="stuff"]:checked').length)
});