Checkbox adding class
by gdoot
HTML
<div class="Row sel" 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 sel" style="background: red;" data-region="APAC" 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 sel" style="background: blue;" data-region="EMEA" 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...
JavaScript
$('[type="checkbox"]').on('change', function () {
$('[type="checkbox"]:checked').each( function (ind, inp) { //loop over checked checkboxes
var type = inp.dataset.type, value = inp.dataset.value;
$('div[data-' + type +'*="' + value +'"]').show();
})
$('[type="checkbox"]:not(:checked)').each( function (ind, inp) { //loop over unchecked checkboxes
var type = inp.dataset.type, value = inp.dataset.value;
$('div[data-' + type +'*="' + value +'"]').hide();
})
});