使用JQuery中的复选框进行过滤时，如何在数据属性的完整字符串中进行搜索，而不仅仅是完全匹配？

Question

I'm working on filtering elements via data-attributes with checkboxes. So far it's working by looking for blank checkboxes, pairing those with their corresponding element via data-attributes and only showing the others ones (ie the elements associated with a checked box).

I have three categories.

• Regions: APAC, EMEA, Americas (always will be one and only one of these)

  Type: Elite, Preferred, Authorized (always will be one and only one of these)

  Countries: Argentina, Brazil, Mexico (can have more than one of these)

The code I have so far in the Fiddle below works fine for the Regions and Types, because it's pretty straightforward when there's only one possibility.

However, the problem arises with Countries when there are more than one.

For example, in the Fiddle, if you uncheck Brazil, the gray one with only Brazil as its country goes away (and comes back if you check it). That's great.

But if you uncheck Argentina AND Brazil, the blue one with "Argentina, Brazil" does NOT go away.

Is there a way to update the JQuery below to handle this? In essence, it needs to look for the country ANYWHERE in the full data-country string, not just look for an exact match.

This seems incredibly complicated to me, but hoping someone can steer me in the right direction.

https://jsfiddle.net/2xa1Lpet/9/

HTML:

<div class="Row" style="background: #eeeeee;" data-region="Americas" data-country="Brazil" data-tier="Elite Reseller">
<div class="Heading">Allegiant Technology</div>
<div class="Copy">Brazil</div>
<div class="Copy">Elite Reseller</div>
</div>

<div class="Row" style="background: red;" data-region="Americas" data-country="Mexico" data-tier="Preferred Reseller">
<div class="Heading">Folco Communications</div>
<div class="Copy">Mexico</div>
<div class="Copy">Preferred Reseller</div>
</div>
<div class="Row" style="background: blue;" data-region="Americas" data-country="Argentina, Mexico, Brazil" data-tier="Authorized Reseller">
<div class="Heading">Latin Telecom</div>
<div class="Copy">Argentina; Mexico; Brazil</div>
<div class="Copy">Authorized Reseller</div>
</div>


<div style="text-align:left; max-width: 1000px;  margin-left: auto;  margin-right: auto;  padding-left: 50px;">
<span class="title">Region:</span><br>
<input class="css-checkbox" type="checkbox" id="APAC" data-type="region" data-value="APAC" checked> 
<label for="APAC" class="css-label">APAC</label>
<input class="css-checkbox" type="checkbox" id="EMEA" data-type="region" data-value="EMEA" checked>
<label for="EMEA" class="css-label">EMEA</label>
<input class="css-checkbox" type="checkbox" id="Americas" data-type="region" data-value="Americas" checked>
<label for="Americas" class="css-label">Americas</label><br><br>
<span class="title">Partner Type:</span><br>
<input class="css-checkbox" type="checkbox" id="Preferred" data-type='tier'  data-value='Preferred Reseller' checked>
<label for="Preferred" class="css-label">Preferred</label>
<input class="css-checkbox" type="checkbox" id="Elite" data-type='tier'  data-value='Elite Reseller' checked>
<label for="Elite" class="css-label">Elite</label>
<input class="css-checkbox" type="checkbox" id="Authorized" data-type='tier'  data-value='Authorized Reseller' checked>
<label for="Authorized" class="css-label">Authorized</label>
<br>
<br>
<span class="title">Country:</span><br>
<input class="css-checkbox" type="checkbox" id="Argentina" data-type='country'  data-value='Argentina' checked>
<label for="Argentina" class="css-label">Argentina</label>
<input class="css-checkbox" type="checkbox" id="Brazil" data-type='country'  data-value='Brazil' checked>
<label for="Brazil" class="css-label">Brazil</label>
<input class="css-checkbox" type="checkbox" id="Mexico" data-type='country'  data-value='Mexico' checked>
<label for="Mexico" class="css-label">Mexico</label>
</div>

JS:

var $boxes = $('input[data-type]'), //all input boxes with data-type attribute
    $dataObjects =$(); //will be filled with all bound data elements
$boxes.each(function(ind, inp){     //create filter information
    var type = inp.dataset.type, value = inp.dataset.value; //for older browsers, use  $(inp).data('type')  
  var filter =  'div[data-' + type +'="' + value +'"]';     
  inp.dataset.filter = filter;
    $.merge($dataObjects,$(filter));
}); 

$boxes.change(function(){
    var blacklist = $boxes.filter(function(i,b){return !b.checked})
    .map(function(i,b){return b.dataset.filter}).toArray().join();
  $dataObjects.hide().not(blacklist).show();
});

Answer 1

Attribute Contains Selector [name*=”value”]

 jQuery( "[data-foo*='food']" ).addClass("sel") 

 .sel {background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-foo="food">food</div> <div data-foo="beer">food</div> <div data-foo="beer, food">beer, food</div> <div data-foo="beer, food, wine">beer, food, wine</div> <div data-foo="beer, wine">beer, wine</div> 

And for your other issue....

$('[type="checkbox"]').on('change', function () {
  $('[data-foo].sel).removeClass('sel'); // remove selections
  $('[type="checkbox"]:checked').each( function () { //loop over checked checkboxes
    var value = inp.dataset.value; //not sure why you are not using just value...
    $('[data-foo*="' + value + '"]').addClass('sel'); // find the attribute
  })
})

---

$('[type="checkbox"]').on('change', function() {
  $('div.actual').removeClass('actual');
  $('[type="checkbox"]:checked').each(function() {
    var inp = this
    var type = inp.dataset.type,
    value = inp.dataset.value;
    $('div[data-' + type + '*="' + value + '"]').addClass("actual");
  })
}).change();