JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://segmentdb.setfive.com/css/ui-darkness/jquery-ui-1.8.16.custom.css">
<div id="checkboxes">

<table id="checkboxTable">
     <tr>
         <td><input type="checkbox" /></td>    
          <td><input type="checkbox" /></td>
          <td><input type="checkbox" /></td>
          <td><input type="checkbox" /></td>
     </tr>
     <tr>
         <td><input type="checkbox" /></td>    
          <td><input type="checkbox" /></td>
          <td><input type="checkbox" /></td>
          <td><input type="checkbox" /></td>
     </tr>
     <tr>
         <td><input type="checkbox" /></td>    
          <td><input type="checkbox" /></td>
          <td><input type="checkbox" /></td>
          <td><input type="checkbox" /></td>
     </tr>
     <tr>
         <td><input type="checkbox" /></td>    
          <td><input type="checkbox" /></td>
          <td><input type="checkbox" /></td>
          <td><input type="checkbox" /></td>
     </tr>
     <tr>
         <td><input type="checkbox" /></td>    
          <td><input type="checkbox" /></td>
          <td><input type="checkbox" /></td>
          <td><input type="checkbox" /></td>
     </tr>
</table>
    
</div>

CSS

#checkboxes {
   margin: auto;
   width: 500px;
   height: 500px; 
   padding-top: 100px;  
}

#checkboxTable {
   width: 400px; 
   margin-left: 50px;  
}

td {
   padding-bottom: 50px;   
}

JavaScript

$("#checkboxes").selectable( {filter: "input:checkbox", 
            stop: function(event, ui) { 
                
                $(".ui-selected").each( function(){

                    $(this).each( function(){
                        var val = $(this).attr("checked") ? null : "checked";
                        $(this).attr("checked", val);
                    });
                    
                });
}});