<div class="box">
<div class="filterreset">СБРОСИТЬ</div>
<br>
<div class="filter">
<select>
<option value="" select="selected">default</option>
<option value="c">первый</option>
<option value="d">второй</option>
<option value="e">третий</option>
</select>
<br>
<select>
<option value="" select="selected">default</option>
<option value="c">первый</option>
<option value="d">второй</option>
<option value="e">третий</option>
</select>
<br>
<label class="check">в наличии
<input type="checkbox" id="checkbox">
<span class="checkmark"></span>
</label>
</div>
</div>
.filterreset{
display:none;
}
.active{
background: #cc0000;
color:#fff;
}
#checkbox.active{
background: #cc0000;
}
/*$( ".folter" ).each(function() {
$( this ).addClass( "foo" );
});*/
//filter select
$('.filter select').on('change', function () {
if ($(this).val() != "") {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
//check
$('#checkbox').click(function(){
if ($(this).is(':checked')){
$(this).parent().addClass('active');
} else {
$(this).parent().removeClass('active');
}
});
function handleFormChange() {
const isCheckboxChecked = $('.box input[type="checkbox"]').prop('checked');
const isSelectionMade = (function () {
let result = false;
$('.box select').each(function () {
if ($(this).val() !== '') result = true;
});
return result;
})();
if (isCheckboxChecked || isSelectionMade) {
$('.filterreset').show();
} else {
$('.filterreset').hide();
}
}
$(document).on('change', '.box', handleFormChange);
This Pen doesn't use any external CSS resources.