JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="nextColor" type="color" value="#9ac99d">

<form id="form1" name="form1" method="post" action="">

  <label>
        <input type="checkbox" name="SelectAll" class="all" />SelectAll</label>
  <label>
        <input type="checkbox" name="x" class="selector" />x</label>

  <label>
        <input type="checkbox" name="y" class="selector" />y</label>

</form>

<form id="form1" name="form1" method="post" action="">

  <label>
        <input type="checkbox" name="SelectAll" class="all" />SelectAll</label>
  <label>
        <input type="checkbox" name="x" class="selector" />x</label>

  <label>
        <input type="checkbox" name="z" class="selector" />z</label>

</form>


<table class="tb">
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
    <tr>
      <td>z</td>
      <td>x</td>
    </tr>
    <tr>
      <td>q</td>
      <td>a</td>
    </tr>
  </tbody>
</table>

CSS

table.tb {
	  border: 1px solid #CCC;
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: 12px;
	  border-collapse: collapse;
	  table-layout: fixed;
	  margin-left: 200px;
	}

	.tb td {
	  padding: 5px;
	  margin: 5px;
	  border: 1px solid #ccc;
	}

JavaScript

$(document).ready(function() {

  $('.selector').each(function() {
    $(this).on('click', function(e) {
    	const $sameNameSelector = $('.selector[name="'+$(this).attr('name')+'"]');
      const isAnySameNameSelectorChecked = $sameNameSelector.filter(function() { return this.checked }).length;
      check(isAnySameNameSelectorChecked ? $("#nextColor").val() : '#fff', $(this).attr("name"));
    });
  });
  $('.all').each(function() {
    $(this).on('click', all);
  });

  function all(event) {
    if ($(this).is(':checked')) {
      let checked = $("input:checkbox:not(:checked)", $(this).parents('form')).not(this);
      checked.prop("checked", true);
      check($("#nextColor").val(), ...checked.map((i, e) => e.name).get());
    } else {
      let checked = $("input:checkbox(:checked)", $(this).parents('form')).not(this);
      checked.prop("checked", false);
      check('#fff', ...checked.map((i, e) => e.name).get());
    }
  }

  function check(color, ...elements) {
    $('td').each((i, td) => {
      if (elements.includes($(td).text())) $(td).css('background', color);
    });
  }


});