Результаты фильтрации по нескольким спискам флажков

Question

У меня есть два разных набора списков флажков. Я хочу, чтобы они фильтровали результаты на основе «AND», а не «OR». Я пробовал множество вариаций JavaScript и не могу сделать так, чтобы он был любым из Set A AND любого из набора B. Справка?

Вот HTML и JS, с jsfiddle после этого, чтобы увидеть его в действии:

<fieldset class="fieldset"> 
    <legend>Status</legend> 
    <input id="passed" type="checkbox" value="passed" checked class="status"> 
    <label for="passed">Passed</label> 
    <br /> 
    <input id="failed" type="checkbox" value="failed" checked class="status"> 
    <label for="failed">Failed</label> 
</fieldset> 

<fieldset class="fieldset"> 
    <legend>Issues</legend> 
    <input id="Jobs" type="checkbox" value="jobs" checked class="subject"> 
    <label for="jobs">Jobs</label> 
    <br /> 
    <input id="immigration" type="checkbox" value="immigration" checked class="subject"> 
    <label for="immigration">Immigration</label> 
</fieldset> 

<div class="document pass jobs"> 
    Item A 
</div> 

<div class="document failed immigration"> 
    Item B 
</div> 

Для JS, я пытался несколько различных вещей, в основном, с помощью классов флажков (так, [type=checkbox].status видов вещей). Но вот самая основная версия:

$(document).ready(function() { 
    $('input[type=checkbox]').on('change', function() { 
     $('.document ').hide(); 
     $('input[type=checkbox]:checked').each(function() { 
      var value = $(this).attr('value'); 
      $('.' + value).show(); 
     }); 
    }); 
}); 

http://jsfiddle.net/ogwofbak/

Answer 1

Одна интересная вещь, которую вы можете сделать, заключается в том, чтобы сделать это наоборот, используя De Morgan's laws для преобразования OR в AND.

Прежде всего, покажите все, затем перейдите ко всем входам, которые не отмечены, и скройте элементы, соответствующие этому флажку, который не установлен.

$(document).ready(function() { 
    $('input[type=checkbox]').on('change', function() { 
     $('.document').show(); 
     $('input[type=checkbox]:not(:checked)').each(function() { 
      var value = $(this).attr('value'); 
      $('.' + value).hide(); 
     }); 
    }); 
}); 

Также, как говорится в другом ответе, у вас есть опечатка в вашем html. Входное значение равно passed, но класс в div равен pass.

Answer 2

$('.document ').hide(); 
    var checked = ''; 
    $('input[type=checkbox]:checked').each(function() { 
     var value = $(this).attr('value'); 
     checked += '.' + value; 
    }); 
    $(checked).show(); 

Рабочая jsFiddle: http://jsfiddle.net/ogwofbak/5/

PS. У вас проблема с опечатками: первый вход имеет значение passed, но div имеет pass класс.

Answer 3

Что вы должны сделать, это перебрать каждую группу, собрать все выбранные элементы из каждой группы, а затем concatinate классы, что-то вроде:

$('.' + val1 + '.' + val2).show(); 

Таким образом, вы получите что-то вроде:

$('.pass.jobs').show(); 

Это именно то, что вы ищете.