Как реализовать скрытие блоков по нажатию на checkbox?

Question

[ApachEsH]

Помогите на JQuery реализовать вот такую штуку :)

<div class="one three"><input type="checkbox" value="a">Цвет 1</div> 
<div class="one"><input type="checkbox" value="b">Цвет 2</div>
<div class="two three"><input type="checkbox" value="c">Цвет 3</div>
<br><br>
<div class="three two"><input type="checkbox" value="a">Рост 1</div>
<div class="three one"><input type="checkbox" value="b">Рост 2</div>
<div class="one two"><input type="checkbox" value="c">Рост 3</div>
<br><br>
<div class="two one"><input type="checkbox" value="a">Вес 1</div>
<div class="three"><input type="checkbox" value="b">Вес 2</div>
<div class="two"><input type="checkbox" value="c">Вес 3</div>

При нажатие на чекбокс со значением "a", чтобы все дивы в которых есть класс "one" скрывались. Для "b" — класс "two" ну и для "c" — класс "three".

jsfiddle.net/ApachEsH/dcngst5d/

Comments

[Сергей delphinpro]

$('[type=checkbox]') // выбираем чекбоксы
.on('change', e=>{  // обрабатываем изменения состояния
  if (e.target.checked) { // галочка установлена
    if (e.target.value == 'a') { // value равен a
      $('.one').hide(); // скрыть нунжные блоки
    }
  }
});

Дальше сам...

Совет: если есть возможность влиять на разметку, лучше именно в html обозначить связь чекбоксов и зависимых блоков через data атрибуты. Это сделает js код более лаконичным, позволит не городить кучу условий.

Answer 1

[kulaeff]

Нужно использовать такой селектор https://api.jquery.com/attribute-contains-word-sel...

https://jsfiddle.net/oex0sz3s/