JSFiddle - React, Tailwind, and code Playground

by cherryflavourpez

HTML

<table id="hours">
    <tbody>
      <tr>
        <td id="tdh00">
            <div>
                <input type="checkbox" id="h00">
                <label for="h00">Label</label>
            </div>
        </td>
        <td id="tdh01">
             <div>
                <input type="checkbox" checked id="h01">
                <label for="h01">Label</label>
              </div>
        </td>
      </tr>
    </tbody>
  </table>

CSS

table { margin: 0 auto; }

td {
    width: 20px;
    height: 20px;
    border: 1px solid #333;
    padding: 0;
    background-color: #265BFA;
}

.active { background-color: red; }

td > div { position: relative; }

input[type=checkbox] { visibility: hidden; }

label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-indent: -999em;
}

JavaScript

$("#hours input").on('change', function(){
    var checkbox = $(this),
        tableCell = checkbox.parents('td');
    
    checkbox.is(':checked') ?
		tableCell.removeClass('active') :
		tableCell.addClass('active');
}).change();