Как поменять класс, если выбран checkbox?

Question

[Денис Кузьмин]

Помогите написать код на JQuery.
Нужно:
1. На document.ready убрать класс hidden у контейнеров, где name дочернего соответствует data-size родителя выбранных чекбоксов.
2. На on.change checkbox-list убрать класс hidden у контейнеров, где name дочернего соответствует data-size выбранных чекбоксов. И добавить класс для контейнеров, где name дочернено соответствует data-size родителя не выбранных чекбоксов.

Разметка:

<div class="filter">
	<div class="checkbox-list">
		<div class="button" data-size="80x190">
			<input type="checkbox" id="556" value="556" checked="checked">
			<label for="556">80x190</label>
		</div>
		<div class="button" data-size="90x200">
			<input type="checkbox" id="557" value="557">
			<label for="557">90x200</label>
		</div>
		<div class="button" data-size="120x200">
			<input type="checkbox" id="558" value="558">
			<label for="558">90x200</label>
		</div>
		<div class="button" data-size="160x200">
			<input type="checkbox" id="559" value="559" checked="checked">
			<label for="559">90x200</label>
		</div>
		<div class="button" data-size="180x190">
			<input type="checkbox" id="560" value="560" checked="checked">
			<label for="560">90x200</label>
		</div>
	</div>
</div>
<div class="content">
	<div class="products">
		<div class="product-box hidden">
			<div class="product-name" name="80x190">Product 1</div>
		</div>
		<div class="product-box hidden">
			<div class="product-name" name="90x200">Product 2</div>
		</div>
		<div class="product-box hidden">
			<div class="product-name" name="120x200">Product 3</div>
		</div>
		<div class="product-box hidden">
			<div class="product-name" name="160x200">Product 4</div>
		</div>
		<div class="product-box hidden">
			<div class="product-name" name="180x190">Product 5</div>
		</div>
	</div>
</div>

На codepen:

Answer 1

[0xD34F]

$('.filter').change(({ target: t }) => {
  $(`[name="${$(t).closest('.button').data('size')}"]`)
    .closest('.product-box')
    .toggleClass('hidden', !t.checked);
}).find(':checked').change();

Или, к чёрту jquery:

const filter = document.querySelector('.filter');

filter.addEventListener('change', ({ target: t }) => {
  const size = t.closest('.button').dataset.size;
  document.querySelectorAll(`[name="${size}"]`).forEach(n => {
    n.closest('.product-box').classList.toggle('hidden', !t.checked);
  });
});

filter.querySelectorAll(':checked').forEach(n => {
  n.dispatchEvent(new Event('change', { bubbles: true }));
});

Comments

[Денис Кузьмин]

Топ!
Спасибо большое!