JSFiddle - React, Tailwind, and code Playground

by Mani Deep

HTML

<table id="example" cellspacing="0" width="20%">
  <thead>
    <tr>
	  <th><button type="button" id="selectAll" class="myClass">Select</button></th>
		<th>number</th>
        <th>company</th>
		<th> Type</th>
		<th> Address</th>
		<th>Code</th>
	</tr>								      	
 </thead>
			

<tbody>										
  <tr>											
    <td><span class="button-checkbox">
      <button type="button" class="btn-chk" data-color="success"></button>
      <input type="checkbox" class="hidden" />
       </span>
		</td>
		<td>1</td>
		<td>APPLE</td>
		<td>IT</td>
		<td>San Jones</td>
	    <td>US</td>
		</tr>
  
		<tr>
		<td><span class="button-checkbox">
		<button type="button" class="btn-chk" data-color="success"></button>
	    <input type="checkbox" class="hidden"  />
		</span>
        </td>
          <td>2</td>
		  <td>DELL</td>
		  <td>IT</td>
          <td>San Jones</td>
          <td>US</td>
      </tr>
  
      <tr>
        <td><span class="button-checkbox">
	   <button type="button" class="btn-chk" data-color="success"></button>                                                           
	   <input type="checkbox" class="hidden"  />
       </span>
	   </td>
	<td>3</td>
	<td>Amazon</td>
	<td>IT</td>
	<td>San Jones</td>
	<td>US</td>
	</tr>
  
	<tr>
	<td><span class="button-checkbox">
    <button type="button" class="btn-chk" data-color="success"></button>
    <input type="checkbox" class="hidden"  />
    </span>
	</td>
	<td>4</td>
	<td>Microsoft</td>
	<td>IT</td>
	<td>San Jones</td>
	<td>US</td>
	</tr>
	</tbody>

JavaScript

$(document).ready(function() {
   $('#selectAll').click(function() {
        $(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
    });
});