JSFiddle - React, Tailwind, and code Playground

by sadisme

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" data-check="drama" type="checkbox"> Фильм 1</label>
  <label><input class="js-checkitem" data-check="comedy" type="checkbox"> Фильм 2</label>
  <label><input class="js-checkitem" 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');
		$('.js-checkitem[data-check="' + groupId + '"]').prop("checked", this.checked); //если изменён общий чекбокс, меняем детей
	});

	$(".js-checkitem").on("change", function() {
		var groupId = $(this).data('check');
		var allChecked = $('.js-checkitem[data-check="' + groupId + '"]:not(:checked)').length == 0;
		$('.js-checkgroup[data-check="' + groupId + '"]').prop("checked", allChecked);
	});