Here's my code so you can already guess my problem:
const solutionChecks = $('#solution-checks :checkbox');
const searchFire = $('.search h6');
const solutionForm = $('#solution-checks');
solutionChecks.click(function() {
$("div[data-category]").hide();
var showAll;
if (solutionChecks.is(":checked")) {
var showAll = true;
} else {
var showAll = false;
}
solutionChecks.find("input").add(':checked').each(function() {
if (solutionChecks.find("input").add(':checked').length == null) {
$("div[data-category]").show();
}
$("div[data-category*=" + $(this).val() +"]").show();
});
});
searchFire.click(function() {
$(this).next('.absolute').toggleClass('show');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container-md search">
<div class="row">
<div class="col-md-4">
<h6>Selection</h6>
<div class="absolute">
<form id="solution-checks">
<label>
<input type="checkbox" name="Businesses" value="Businesses" id="Businesses"> Businesses
<span class="checkmark"></span>
</label>
<br>
<label>
<input type="checkbox" name="Accountancy" value="Accountancy" id="Accountancy"> Accountancy
<span class="checkmark"></span>
</label>
<br>
<label>
<input type="checkbox" name="Banks" value="Banks" id="Banks"> Banks
<span class="checkmark"></span>
</label>
<br>
<label>
<input type="checkbox" name="Partners" value="Partners" id="Partners"> Partners
<span class="checkmark"></span>
</label>
<br>
<label>
<input type="checkbox" name="Developers" value="Developers" id="Developers"> Developers
<span class="checkmark"></span>
</label>
<br>
</form>
</div>
</div>
</div>
</div>
<div class="container-md px-0 solutions">
<div class="row">
<div class="col-md-4" data-category="Accountancy">
<div class="h-100">
<h3>Something</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>
<a href="#" class="btn-secondary">Learn more</a>
</div>
</div>
<div class="col-md-4" data-category="Partners">
<div class="h-100">
<h3>Something</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>
<a href="#" class="btn-secondary">Learn more</a>
</div>
</div>
<div class="col-md-4" data-category="Accountancy">
<div class="h-100">
<h3>Something</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>
<a href="#" class="btn-secondary">Learn more</a>
</div>
</div>
</div>
</div>
So, the problem is easy: I'm building a search filter based on checkboxes.
If you check an input or more than one inputs based on the choice, the boxes with the selector not chosen will disappear but the one or the ones selected will stay there.
I'm using jquery, and a click event to fire the system. The problem though is what happens if you won't select any choice. Essentially, since you will hide everything as soon as you will fire the event (click), all the boxes will stay hidden. In my code, I created an if statement, hoping to catch the true and false state, but unfortunately, it didn't work. The reason why it didn't work is because of this reason: before I loop through all my elements, I'm able to catch the state (true/false of my input) but right after, I will be able to catch only the true statement.
I'm saying this because I tried to create an if statement inside the each function to catch the length of the checked selector:
if (solutionChecks.find("input").add(':checked')).length == 0){}
Which didn't work because like I said, for some reason, inside the each statement, my variable showAll didn't work. I tried to put the variable inside the each statement and it didn't work either, it only worked outside the each statement.
My question is: how can I capture the click status?
Thanks
Aucun commentaire:
Enregistrer un commentaire