JSFiddle - React, Tailwind, and code Playground

HTML

<table id="articles" class="table table-hover table-bordered datatable">
    <thead>
        <tr>
            <th>
                <input type="checkbox" id="selectall" />
            </th>
            <th>Field 1</th>
            <th>Field 2</th>
            <th>Field 3</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr id="art-1" class="data">
            <td>
                <input class="case" type="checkbox" name="codebar[]" value="code-1" />
            </td>
            <td>Value 1-A</td>
            <td>Value 1-B</td>
            <td>Value 1-C</td>
            <td><a id="mod-art-1" class="btn btn-mini btn-info modify" href="#"><i class="icon-edit icon-white"></i></a>

            </td>
            <td><a id="del-art-1" class="btn btn-mini btn-danger delete" href="#"><i class="icon-trash icon-white"></i></a>

            </td>
        </tr>
        <tr id="art-2" class="data">
            <td>
                <input class="case" type="checkbox" name="codebar[]" value="code-2" />
            </td>
            <td>Value 2-A</td>
            <td>Value 2-B</td>
            <td>Value 2-C</td>
            <td><a id="mod-art-2" class="btn btn-mini btn-info modify" href="#"><i class="icon-edit icon-white"></i></a>

            </td>
            <td><a id="del-art-2" class="btn btn-mini btn-danger delete" href="#"><i class="icon-trash icon-white"></i></a>

            </td>
        </tr>
        <tr id="art-3" class="data">
            <td>
                <input class="case" type="checkbox" name="codebar[]" value="code-3" />
            </td>
            <td>Value 3-A</td>
            <td>Value 3-B</td>
            <td>Value 3-C</td>
            <td><a id="mod-art-3" class="btn btn-mini btn-info modify" href="#"><i class="icon-edit icon-white"></i></a>

            </td>
            <td><a id="del-art-3" class="btn btn-mini btn-danger delete" href="#"><i class="icon-trash icon-white"></i></a>

          ...

JavaScript

// add multiple select / deselect functionality
    $("#selectall").click(function () {
        $('.case').prop('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function () {
        if ($(".case").length == $(".case:checked").length) {
            $("#selectall").prop("checked", "checked");
        } else {
            $("#selectall").prop("checked",false);
        }
    });