JSFiddle - React, Tailwind, and code Playground

by ewin2712

HTML

<fieldset class="formLayout">
    <legend>Selección / Deselección Múltiple - Checkbox</legend>
    <p><b>Ejemplo Práctico:</b>
    </p>
    <table class="tabla">
        <tr>
            <th>Todos
                <input type="checkbox" id="checkAll" />
            </th>
            <th>Código Cliente</th>
            <th>Deuda</th>
            <th>Fecha de Emisión</th>
            <th>Fecha de Vencimiento</th>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" class="itemCheck" value="1" />
            </td>
            <td>4174617</td>
            <td>Servicio de Agua</td>
            <td>20/02/2014</td>
            <td>30/02/2014</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" class="itemCheck" value="2" />
            </td>
            <td>4174613</td>
            <td>Servicio de Luz</td>
            <td>20/02/2014</td>
            <td>30/02/2014</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" class="itemCheck" value="3" />
            </td>
            <td>4174589</td>
            <td>Servicio de Teléfono</td>
            <td>20/02/2014</td>
            <td>30/02/2014</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" class="itemCheck"  value="4" />
            </td>
            <td>4174576</td>
            <td>Servicio de TV/Cable</td>
            <td>20/02/2014</td>
            <td>30/02/2014</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" class="itemCheck"  value="5" />
            </td>
            <td>4174554</td>
            <td>Servicio de Internet</td>
            <td>20/02/2014</td>
            <td>30/02/2014</td>
        </tr>
    </table>
    <input type="button" value="Enviar Recibo" />
</fieldset>

CSS

fieldset.formLayout {
    padding-left: 10px;
    padding-bottom: 5px;
    padding-right: 10px;
    background-color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
fieldset.formLayout table {
    border-spacing:5px;
}
.formLayout legend {
    color: #666;
    font-weight: bold;
    height: 14px;
}
table.tableFormLayout td {
    padding-top:10px;
}
.tabla {
    background-color: #fff;
    width: 50%;
    margin: 5px 0 10px 3px;
    color: #333333;
    font-size: 11px;
    border-collapse:collapse;
    border: 1px solid #666;
}
.tabla tr:hover {
    background-color: #FFFFD4;
    font-weight: bold;
}
.tabla tr {
    background-color: #fff;
}
.tabla th {
    border: 1px solid #666;
    background-color: #A9BCF5;
    color: #000;
    font-weight: bold;
    padding-top:3px;
    padding-bottom:3px;
    font-size: 11px;
}
.tabla td {
    padding: 2px;
    border-collapse: collapse;
    border-width: 1px;
    border: 1px solid #666;
}

JavaScript

$(function () {

    // add multiple select / deselect functionality
    $("#checkAll").click(function () {
        $('.itemCheck').attr('checked', this.checked);
    });

    $(".itemCheck").click(function () {

        if ($(".itemCheck").length == $(".itemCheck:checked").length) {
            $("#checkAll").attr("checked", "checked");
        } else {
            $("#checkAll").removeAttr("checked");
        }

    });
});