Jquery - необходимо показывать кнопку сбосить фильтр для каждого фильтра отдельно
помогите пожалуйста кодом
Нужно показывать кнопку сброисить фильтр для каждого блок-фильтра отдельно Есть кнопка Сбросить с классом .clear Если мы нажимаем на как блок фильтр и получаем checked - значит кнопка появляется, а если нет нажатых checked - кнопки нет
Пример кода:
$('input:checkbox').change(function(){
if($(this).is(":checked")) {
$('.clear').addClass("qwe");
} else {
$('.clear').removeClass("qwe");
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
<div class="container">
<div class="row">
<div class="col-4">
<div class="border p-3">
<div class="pb-2 d-flex justify-content-between">
<div class="title text-success">Параметр 1</div>
<div class="clear">Сбросить</div>
</div>
<p> <label> <input type="checkbox" name="filter1">qwe11</label> </p>
<p> <label> <input type="checkbox" name="filter1">qwe12</label> </p>
<p> <label> <input type="checkbox" name="filter1">qwe13</label> </p>
</div>
</div>
<div class="col-4">
<div class="border p-3">
<div class="pb-2 d-flex justify-content-between">
<div class="title text-success">Параметр 1</div>
<div class="clear">Сбросить</div>
</div>
<p> <label> <input type="checkbox" name="filter2">qwe21</label> </p>
<p> <label> <input type="checkbox" name="filter2">qwe22</label> </p>
<p> <label> <input type="checkbox" name="filter2">qwe23</label> </p>
</div>
</div>
<div class="col-4">
<div class="border p-3">
<div class="pb-2 d-flex justify-content-between">
<div class="title text-success">Параметр 1</div>
<div class="clear">Сбросить</div>
</div>
<p> <label> <input type="checkbox" name="filter3">qwe31</label> </p>
<p> <label> <input type="checkbox" name="filter3">qwe32</label> </p>
<p> <label> <input type="checkbox" name="filter3">qwe33</label> </p>
</div>
</div>
</div>
</div>