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

Помогите написать код на 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:
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
$('.filter').change(({ target: t }) => {
  $(`[name="${$(t).closest('.button').data('size')}"]`)
    .closest('.product-box')
    .toggleClass('hidden', !t.checked);
}).find(':checked').change();
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы