JSFiddle - React, Tailwind, and code Playground

HTML

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

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



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

  <label><input class="js-checkitem drama comedy" type="checkbox"> Фильм 1</label>
  <label><input class="js-checkitem comedy" type="checkbox"> Фильм 2</label>
  <label><input class="js-checkitem drama" type="checkbox"> Фильм 3</label>
  <label><input class="js-checkitem action" type="checkbox"> Фильм 4</label>
  <label> <input class="js-checkitem action drama comedy" type="checkbox"> Фильм 5</label>
  <label><input class="js-checkitem action 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() {
		var groupId = $(this).data('check');
		var allChecked = $('.' + groupId + ':not(:checked)').length == 0;
		$('.j' + groupId).prop("checked", allChecked);
	});