I have the below code for a simple checkbox filter. It works well if all conditions are met with the checkboxes, i.e. Monday or Tuesday are checked. But checking both Monday and Tuesday gives no results. I would like it to show results that have a Monday or a Tuesday but can’t adapt what i have. Any help massively appreciated!
<form id="filter">
<h3>Filter</h3>
<h4>Day</h4>
<div class="checkDays"><input class="" type="checkbox" value="Monday" /> Monday</div>
<div class="checkDays"><input class="" type="checkbox" value="Tuesday" /> Tuesday</div>
<div class="checkDays"><input class="" type="checkbox" value="Wednesday" /> Wednesday</div>
<div class="checkDays"><input class="" type="checkbox" value="Thursday" /> Thursday</div>
<div class="checkDays"><input class="" type="checkbox" value="Friday" /> Friday</div>
<div class="checkDays"><input class="" type="checkbox" value="Saturday" /> Saturday</div>
<div class="checkDays"><input class="" type="checkbox" value="Sunday" /> Sunday</div>
<h4>Time</h4>
<div class="checkTime"><input class="" type="checkbox" value="AM" /> AM</div>
<div class="checkTime"><input class="" type="checkbox" value="PM" /> PM</div>
<div class="checkTime"><input class="" type="checkbox" value="ALL DAY" /> ALL DAY</div>
</form>
<div class="noresults"></div>
<?php $loop = new WP_Query(array('post_type' => 'session', 'posts_per_page' => 50)); while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="card" data-combined="<?php the_field('AM/PM');?>,<?php $field = get_field_object('day'); $days = $field['value']; if($days): foreach( $days as $day ): echo ',' . $field['choices'][$day]; endforeach; endif; ?>">
</div>
<script>
$('form#filter').on('change', function () {
var filterList = [];
$("form#filter .checkDays input:checked").each(function () {
var dataDays = $(this).val();
filterList.push(dataDays);
});
$("form#filter .checkTime input:checked").each(function () {
var dataTime = $(this).val();
filterList.push(dataTime);
});
if (filterList.length == 0) {
jQuery('.card').removeClass('is-hidden');
jQuery('.card').fadeIn();
} else {
jQuery('.card').filter(function () {
const isVisible = ['data-combined'].some(attr => {
const attrValue = jQuery(this).attr(attr);
if (!attrValue) {
return;
}
const offerings = attrValue.split(',');
return filterList.every(offering => offerings.indexOf(offering) > -1);
});
if (isVisible) {
jQuery(this).fadeIn('slow');
} else {
jQuery(this).hide();
}
});
}
});
</script>