JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<form>
    <input type="checkbox" name="select_all" id="selectall" class="checkAll"
     />Select / Deselect All
    <input type="checkbox" name="UserPrefID130682528"
    />
    <input type="checkbox" name="UserPrefID130682528" />
    <input type="checkbox" name="UserPrefID130682528" />
    <input type="checkbox" name="UserPrefID130682528" />
</form>
<form>
    <input type="checkbox" name="select_all" id="selectall" class="checkAll"
     />Select / Deselect All
    <input type="checkbox" name="UserPrefID130682528"
    />
    <input type="checkbox" name="UserPrefID130682528" />
    <input type="checkbox" name="UserPrefID130682528" />
    <input type="checkbox" name="UserPrefID130682528" />
</form>

JavaScript

function toggleChecked( event ) {
    $( event.target ).nextAll( ":checkbox" ).prop( "checked", $( event.target ).is( ":checked" ) );
} 
$( document ).on( "click", ".checkAll", toggleChecked );