JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'>
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet">
</head>
<body>

<div class="container">
    <table class="table">
        <thead>
        <tr>
            <th>
                <label class="c-input c-checkbox">
                    <input type="checkbox">
                    <span class="c-indicator"></span>Select all
                </label>
            </th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <label class="c-input c-checkbox">
                <input type="checkbox">
                <span class="c-indicator"></span>
            </label>
            </td>
            <td>Jim</td>
            <td>19</td>
        </tr>
        <tr>
            <td>
                <label class="c-input c-checkbox">
                    <input type="checkbox">
                    <span class="c-indicator"></span>
                </label>
            </td>
            <td>Lucy</td>
            <td>18</td>
        </tr>
        <tr>
            <td>
                <label class="c-input c-checkbox">
                    <input type="checkbox">
                    <span class="c-indicator"></span>
                </label>
            </td>
            <td>Lily</td>
            <td>18</td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script>
<script...

JavaScript

$('input[type="checkbox"]').first().on('change', function()
	{
	$('input[type="checkbox"]').each(function()
  {
  	$(this).prop('checked', $('input[type="checkbox"]').first().is(':checked'));
  });
});