Я думаю, что получил то, что вы пытаетесь сделать здесь ...
Но вы упускаете многие аспекты того, что должен выполнять ваш скрипт, чтобы "отфильтровать" некоторые результаты на основе данных (элементов встраницы), которую вы хотите использовать.
Во-первых, id должен быть уникальным.Вы не можете использовать id="user1 более одного раза.Поэтому я изменил его на атрибут data-.
Затем при каждом событии изменения $(this).val() является значением измененного элемента only .Вы должны хранить то, что было предварительно проверено ... И также быть уверенным, что оно проверено!Событие change может сработать, когда пользователь уберет отметку!
Итак, вот пример, показывающий логические шаги ... Может быть более короткий код для достижения того же результата, но поскольку ваша разметка была немногогрязный, я не пытался сделать его идеально оптимизированным.
Это все еще глючит ... Но я думаю, что это хороший стартер.Удачи!
console.clear();
var checked = [];
$(".filter-list-one :checkbox, .filter-list-two :checkbox").change(function() {
$(".filtered").hide();
var possible = [];
var confirmed = [];
if($(this).is(":checked")){
checked.push($(this).val());
console.log(checked);
checked.forEach(function(value,index){
var target = checked[index].toLowerCase();
$(".objects .user").each(function(){
if( $(this).find("."+target).length>0 ){
possible.push($(this).data("user"));
}
});
$(".colors .user").each(function(){
if( $(this).find("."+target).length>0 && $.inArray($(this).data("user"),possible)!=-1 ){
confirmed.push($(this).data("user"));
}
});
});
console.log("possible: "+possible);
console.log("confirmed: "+confirmed)
confirmed.forEach(function(value,index){
$(".filtered[data-user='"+value+"']").show();
});
}else{ // If unchecking...
console.log("unchecking "+$(this).val());
if($.inArray($(this).val(),checked)!=-1){
checked.splice($.inArray($(this).val()),1);
console.log(checked)
}
}
});
div {
margin-bottom: 20px;
}
h3 {
margin: 5px 0;
}
p {
margin: 0 5px;
}
.colors p,
.user,
.filtered {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FILTERS -->
<h3>Filter items</h3>
<div class="filter-list-one">
<input type="checkbox" value="Wood">Wood<br>
<input type="checkbox" value="Bucket">Bucket<br>
<input type="checkbox" value="Hammer">Hammer<br>
</div>
<h3>Filter colors</h3>
<div class="filter-list-two">
<input type="checkbox" value="Red">Red<br>
<input type="checkbox" value="Purple">Purple<br>
<input type="checkbox" value="Blue">Blue<br>
</div>
<!-- FILTERS END -->
<!-- SEARCHING THROUGH -->
<h3>Results</h3>
<div class="objects">
<p data-user="user1" class="user">
<span class="wood">wood</span>
</p>
<p data-user="user2" class="user">
<span class="bucket">bucket</span>
</p>
<p data-user="user3" class="user">
<span class="hammer">hammer</span>
</p>
</div>
<div class="colors">
<p data-user="user1" class="user">
<span class="red">red</span>
</p>
<p data-user="user2" class="user">
<span class="purple">purple</span>
</p>
<p data-user="user3" class="user">
<span class="blue">blue</span>
</p>
</div>
<div class="showUsers">
<div data-user="user1" class="filtered">I'm USER #1 and I have those things</div>
<div data-user="user2" class="filtered">I'm USER #2 and I have those things</div>
<div data-user="user3" class="filtered">I'm USER #3 and I have those things</div>
</div>
<!-- SEARCHING THROUGH NED -->