JSFiddle - React, Tailwind, and code Playground

by Jayna

HTML

<form action="#">
    <p><label><input class="checkbox-box" type="checkbox" id="checkAll"/> Check all</label></p>
    
    <fieldset>
        <p><label><input type="checkbox" /> Revenue Stream 1</label></p>
        <p><label><input type="checkbox" /> Revenue Stream 2</label></p>
        <p><label><input type="checkbox" /> Revenue Stream 3</label></p>
        <p><label><input type="checkbox" /> Option 4</label></p>
    </fieldset>
</form>

CSS

.checkbox-box {
  display: none;
}

JavaScript

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});