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,comedy" 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,action" 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').split(',');
    
    var i;
		for(i = 0; i <= groupId.length; i++){
			var allChecked = $('.js-checkitem[data-check*="' + groupId[i] + '"]:not(:checked)').length == 0;
			$('.js-checkgroup[data-check*="' + groupId[i] + '"]').prop("checked", allChecked);
  	}
	});