JSFiddle - React, Tailwind, and code Playground

by ruado1987

HTML

<form method="post">
    <input type="hidden" name="creator_list" id="creator_list" value="" />
    <input type="hidden" name="approver_list" id="approver_list" value="" />
    <fieldset>
        <legend>Category Details</legend>
        <label for="category_name">Category Name</label>
        <input class="text" type="text" id="category_name" name="category_name" style="width:220px" value="" />
        <br/>
        <label for="category_description">Category Description</label>
        <input class="text" style="width:300px" type="text" id="category_description" name="category_description" value="" />
        <br/>
        <label for="creator">Creator(s)</label>
        <div id="creator_list_display"></div> <a href="#"><img src="/images/btn_add.png" id="img_add_creator" class="add_img"/></a>
        <br/>
        <label for="approver">Approver(s)</label>
        <div id="approver_list_display"></div>
<a href="#" class="float_left"><img src="/images/btn_add.png" id="img_add_approver" class="add_img"/></a>
        <br/>
    </fieldset>
    <fieldset>
        <legend>Category Access</legend>
        <table id="dept_permissions_table">
            <tr id="tbl_heading">
                <th>Department</th>
                <th class="checkbox_col">Grant Access &nbsp;
                    <input type="checkbox" id="select_all" />
                </th>
                <!-- <th>Write</th> -->
            </tr>
            <tr class="odd">
                <td><b>ASI Accounts </b>
                </td>
                <td class="checkbox_col">
                    <input type="checkbox" class="checkbox_read" name="read[23]" id="read[23]" />
                </td>
            </tr>
            <tr class="even">
                <td><b>ASI Metering </b>
                </td>
                <td class="checkbox_col">
                    <input type="checkbox" class="checkbox_read" name="read[12]" id="read[12]" />
                </td>
            </tr>
            <tr...

JavaScript

$('#select_all').click(function () {
     if ($(this).is(':checked')) {

         $('.checkbox_read').prop('checked', true);
     } else {
         $('.checkbox_read').prop('checked', false);
     }
 });