JSFiddle - React, Tailwind, and code Playground

by kianoshp

HTML

<table>
	<thead>
	    <th><input type="checkbox" name="selectAll" id="selectAll"/></th>
        <th>Name</th>
    </thead>
    <tbody>
        <tr>
            <td class="center-it"><input type="checkbox" name="selectAdministrator" id="select_1"  class="select-group" /></td>
            <td>Mickey Mouse</td>
        </tr>
        <tr>
            <td class="center-it"><input type="checkbox" name="selectAdministrator" id="select_2" class="select-group" /></td>
            <td>Minnie Mouse</td>
        </tr>
        <tr>
            <td class="center-it"><input type="checkbox" name="selectAdministrator" id="select_3" class="select-group" /></td>
            <td>Goofy</td>
        </tr>
    </tbody>

CSS

table {
  margin: 10px 10px 50px 10px;
  border: 1px solid #dddddd;
  border-collapse: collapse;
  border-spacing: 2px;
  width: 50%; }
  table tr:nth-child(even) {
    background-color: #dee3f8; }
.center-it {
  text-align: center;
  vertical-align: middle;
  margin: 0 auto; }

JavaScript

checkAllCheckboxes = function(thisEl) {
    console.log('is it checked --> ' + $(thisEl).is(':checked'));
    if ($(thisEl).is(':checked')) {
        return $(thisEl).closest('table').find('tbody tr td input[type="checkbox"]').each(function(){
            this.checked = true;
        });
    } else {
        return $(thisEl).closest('table').find('tbody tr td input[type="checkbox"]').each(function(){
            this.checked = false;
        });
    }
  };

$('#selectAll').on('click', function(e) {
    checkAllCheckboxes($(e.currentTarget));
});