JSFiddle - React, Tailwind, and code Playground

HTML

<div class="groups">
  <h2>Группы:</h2>

  <label><input class="js-checkgroup drama" data-check="drama" type="checkbox" > Драма</label>
  <label><input class="js-checkgroup comedy" data-check="comedy" type="checkbox"> Комедия</label>
  <label><input class="js-checkgroup action" data-check="action" type="checkbox"> Экшн</label>
</div>



<div class="vars">
  <h2>Список вариантов:</h2>

  <label><input class="js-checkitem drama comedy" data-check="drama comedy" type="checkbox"> Фильм 1</label>
  <label><input class="js-checkitem comedy" data-check="comedy" type="checkbox"> Фильм 2</label>
  <label><input class="js-checkitem drama" data-check="drama" type="checkbox"> Фильм 3</label>
  <label><input class="js-checkitem" data-check="comedy" type="checkbox"> Фильм 4</label>
  <label> <input class="js-checkitem" data-check="action" type="checkbox"> Фильм 5</label>
  <label><input class="js-checkitem" data-check="drama" type="checkbox"> Фильм 6</label>
</div>

JavaScript

$(".js-checkgroup").on("change", function() {
		var groupId = $(this).data('check');
		$('.' + groupId).prop("checked", this.checked); //если изменён общий чекбокс, меняем детей
	});

	$(".js-checkitem").on("change", function() {
		$(this).attr('class').split(' ').forEach(function(i) {
    	$('.js-checkgroup').each(function() {
      	if ($(this).hasClass(i)) $(this).prop("checked", false);
      });
    });
	});