Max Lynn Max Lynn - 4 months ago 14
jQuery Question

Show elements that have a data attr object with the checked input

enter image description here

Above is a list of checkboxes, simple start right. Two of them are checked. I then below have a list of panels that I would like to be hidden or shown depending if the panels data attr array called data-category contains HR or Customer Service.

an example of the data array:

["Legal and Regulatory","Marketing","HR","Cusomer Service"]


The problem:

The JS below from my inspection seems to be showing elements that was the last checked checkbox. For example if I clicked "HR" last then this would show the panels for "HR" and not for "Customer Service" too.

So what I would like is to show the panels that data attr include "Customer Service" and "HR". However if a data attr didn't have for example "Sales" but does have "Customer Service" and "HR" and "Sales" became checked. It would then be hidden.

$('.checkbox').on('change', function() {
$('.pagination, .callout').hide();

$('.checkbox:checked').each(function() {
var checkboxName = $(this).val();

$('.callout').hide().each(function() {
var calloutArray = $(this).data();

if (calloutArray.category.indexOf(checkboxName) !== -1) {
$(this).show();
}
});
});

var countChecked = $('.checkbox').filter(':checked').length;

if (countChecked === 0) {
$('.callout').show();
$('.pagination').show();

pagination();
}

});


To summarise that, basically if the data attr goes not contain the checked input then hide otherwise if all checked boxes do exist show the panel.

I hope I've explained this. Please leave comments for further information needed.

**** EDIT *****

Checkbox HTML:

<ul class="category-filters">
<li>
<label><input class="checkbox" value="Customer Service" type="checkbox">Customer Service</label>
</li>
<li>
<label><input class="checkbox" value="Finance" type="checkbox">Finance</label>
</li>
<li>
<label><input class="checkbox" value="HR" type="checkbox">HR</label>
</li>
<li>
<label><input class="checkbox" value="Legal and Regulatory" type="checkbox">Legal and Regulatory</label>
</li>
<li>
<label><input class="checkbox" value="Marketing" type="checkbox">Marketing</label>
</li>
<li>
<label><input class="checkbox" value="Operations" type="checkbox">Operations</label>
</li>
<li>
<label><input class="checkbox" value="Risk Management" type="checkbox">Risk Management</label>
</li>
<li>
<label><input class="checkbox" value="Sales" type="checkbox">Sales</label>
</li>
<li>
<label><input class="checkbox" value="Technology" type="checkbox">Technology</label>
</li>
</ul>


And these are the panels:

<div style="display: none;" class="callout horizontal word-wrap" data-category="[&quot;Customer Service&quot;,&quot;HR&quot;,&quot;Operations&quot;,&quot;Risk Management&quot;,&quot;Technology&quot;]">

<img src="http://localhost/vallum/wp-content/uploads/2016/07/David-King.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="David-King" srcset="http://localhost/vallum/wp-content/uploads/2016/07/David-King.jpg 480w, http://localhost/vallum/wp-content/uploads/2016/07/David-King-277x300.jpg 277w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 480px">
<h5>David King</h5>
<p>With over 19 year’s experience of working</p>

</div>

Answer

Your problem is that you are looping the checkboxes and hiding all the panels on each checkbox iteration, this undoes the work of the previous checkbox iteration.

$('.callout').hide().each(function() {

is your problem. You are already hiding all the panels before you loop the checkboxes so just remove the hide:

$('.callout').each(function() {