'JQuery - Removing class from div to hide/show them while sorting ids with multiple inputs

I'm posting here because I'm looking to create a simple front-end web application. I'm using JQuery. The main function of the app would be to display or not bootstrap cards according to a sorting system, which includes the possibility that two options are selected (and therefore only the cards corresponding to the two selected options are displayed = either 4, or 8, or 16 Cards because each card is linked to 4 of the inputs)

When checking an input (let's say Ne), only 8 cards with Ne (included in colored subtitles of cards) should be shown. This step works. Wheck checking another input (Fe), now only 4 cards with Ne AND Fe should be shown. This step works too. Now what I'm wondering is why when I am unchecking either the Fe or Ne input (in this case Fe), there are still only 4 cards shown. What I expect is that the 8 cards from the beginning (of Ne) are shown, not only 8.

I almost succeeded in filtering my cards according to the inputs but I have a problem when I check 2 inputs and I want to uncheck 1, the corresponding cards do not show again. I think it's a logic problem but I can't find why. What I guess is that the fact that multiple checkboxes are checked, the condition "checked == false" can't apply therefore the class can't be removed. But I don't know how to do it else way. As you can see, I have tried using an array but I don't know how to interact with it.

I attached some screenshots and a piece of code

STEP 0 : No action

https://i.stack.imgur.com/16dGY.png

STEP 1: Adding Ne

https://i.stack.imgur.com/SPz2T.png

STEP 2 : Adding Fe

https://i.stack.imgur.com/A3jxq.png

STEP 3 : Removing Fe

https://i.stack.imgur.com/tnaOJ.png

I tried the JQuery Attribute Selector but this does not help when it comes to unchecking 2 checkboxes.

<input type="checkbox" onclick="showCard(this.id)" class="btn-check" id="Ne" autocomplete="off">
<label class="btn btn-outline-light" for="Ne">Ne</label>
          
...
        
<input type="checkbox" onclick="showCard(this.id)" class="btn-check" id="Ti" autocomplete="off">
<label class="btn btn-outline-light" for="Ti">Ti</label>

...

<div id="SiFeTiNe" class="col-sm-3 card typecard text-white bg-dark mb-5 pb-4 pt-2" style="max-width: 18rem;">
     <div class="card-body">
          ...
     </div>
</div>

...

function showCard(clicked_id) {
  if( $('input[type=checkbox]').is(':checked')) {
    $('div.typecard').not('[id*="' + clicked_id + '"]').addClass("invisible");
  } else {
    $('div.typecard').not('[id*="' + clicked_id + '"]').removeClass("invisible");
  }
};

  .invisible {
    display: none;
}

Any contribution or help is greatly appreciated. Have a nice day!

htmljqueryarraysfunctionhide


Solution 1:[1]

I think that the problem is here

$('input[type=checkbox]').is(':checked')

You always check if "any input is checked". So when you check 1, 2 or 3 inputs, you go into your if condition and run addClass section. But when you uncheck your third input, the previous sentence is true too because there some inputs checked.

You must use $(this) (the un/checked input) in your if condition and then, addClass or removeClass.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Victor

Related Questions