JSFiddle - React, Tailwind, and code Playground

by davidcl64

HTML

<table class="email-items">
        <thead>
            <tr class="header">
                <th class="select">
                    <input class="select" id="selectall" type="checkbox" title="Select All" />
                </th>
                <th class="to">Name:</th>
                <th class="subject">Description:</th>
                <th class="to">Email Address</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="select">
                        <input class="check-box" type="checkbox" name="Checked" />
                    </div>
                </td>
                <td>
                    <div class="to">Jim G</div>
                </td>
                <td>
                    <div class="subject">On Awesome Architect</div>
                </td>
                <td>
                    <div class="date">[email protected]</div>
                </td>

            </tr>
            <tr>
                <td>
                    <div class="select">
                        <input class="check-box" type="checkbox" name="Checked" />
                    </div>
                </td>
                <td>
                    <div class="to">Dale B</div>
                </td>
                <td>
                    <div class="subject">A Super Cheif</div>
                </td>
                <td>
                    <div class="date">[email protected]</div>
                </td>

            </tr>
            <tr>
                <td>
                    <div class="select">
                        <input class="check-box" type="checkbox" name="Checked" />
                    </div>
                </td>
                <td>
                    <div class="to">Oscar H</div>
                </td>
                <td>
                    <div class="subject">Selling ice cube to the eskimos</div>
                </td>
                <td>
                    <div...

JavaScript

$(document).ready(function () {
            $('#selectall').click(function () {

                var checked = $('[id="selectall"]:checked').length;

                if (checked) {
                    // select all
                    $('tbody input[type="checkbox"]').prop('checked', true);
                }
                else {
                    $('tbody input[type="checkbox"]').prop('checked', false);
                }

                alert($('tbody input:checked').length);
            });
        });