Как вывести определённые блоки при выборе checkbox?

Question

[drtvader]

Привет! Как можно вывести определённые блоки при выборе определённого checkbox?
Нужно что бы при выборе определенной рубрики, остальные скрывались.
Например при выборе рубрики "Общие события" показывались только события имеющие data-rubric="1"? а остальные скрывались. Или например при выборе нескольких не скрывались только те события, которые соответствовали бы выбранным.

https://jsfiddle.net/drtvader/63zqhu1f/1/

Answer 1

[Николай]

Один из вариантов:
сделать псевдокласс отвечающий за видимость элементов
при измнении чекбоксов проходить по списку блоков и добавлять/убирать класс в зависимости от текущих фильтров.

Answer 2

[Aleksandr]

https://jsfiddle.net/63zqhu1f/3/
Вот так

Answer 3

[drtvader]

Вот такое работает

var rubric = $('[data-rubric]');
var rubric_items = $('.filter-rubric__item :checkbox');
$('body').on('change', '.filter-rubric__item :checkbox', function() {
    var name = this.id;
    if($('.filter-rubric__item :checkbox:checked').length == 1){
       if($(this).prop('checked')) {
           rubric.hide();
           $('[data-rubric='+ name +']').show();
       } else {
           $('[data-rubric='+ name +']').hide();
       }
    } else if($('.filter-rubric__item :checkbox:checked').length > 1) {
      if($(this).prop('checked')) {
        $('[data-rubric='+ name +']').show();
      } else {
        $('[data-rubric='+ name +']').hide();
      }
    } else {
      rubric.show();
    }
});