JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<table id="grap">
<tr><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td></tr>
<tr><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td></tr>
<tr><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox" class="cell"></td><td><input type="checkbox"...

CSS

td.ui-selected {
  background: #0f0;
}

JavaScript

$('#grap').selectable();

$('#on').click(function(){
  $('td.ui-selected').children('input').prop('checked',true);
})

$('#off').click(function(){
  $('td.ui-selected').children('input').prop('checked',false);
})