The toggle in the script isn't working for me

Question

I'm using this code that I found online, but it's not working completely the way I want it to.

Basically I am wanting check boxes to hide divs based on the users selection. I am building an allergens advice page for a restaurant. When a guest selects the allergens they have I want it to hide the dishes that they cannot have.

The above code works perfectly if the guest has one allergen. It hides the div. If they select more than one then the box will reappear.

 $(document).ready(function() { $('input[type="checkbox"]').click(function() { var inputValue = $(this).attr("value"); $("." + inputValue).toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="selectt Eggs Gluten"> <strong>Dough Balls</strong><br/> Cheese dough balls served with chipotle butter. </div> <ul> <li> <input type="checkbox" id="checkboxThree" value="Eggs"> <label for="checkboxThree"> Eggs</label> </li> </ul>

I'm guessing it's doing it because the code is toggling, but I don't know of any other code to prevent that. Your help would be greatly appreciated.

Answer 1

Your code throws unexpected end of input, you are missing closing parentheses for $(document).ready() :

 $(document).ready(function() { $('input[type="checkbox"]').click(function() { var inputValue = $(this).attr("value"); $("." + inputValue).toggle(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="selectt Eggs Gluten"> <strong>Dough Balls</strong><br/> Cheese dough balls served with chipotle butter.</div> <li> <input type="checkbox" id="checkboxThree" value="Eggs"> <label for="checkboxThree"> Eggs</label> </li>

In the case of multiple checkboxes that refer to the same product that should stay hidden:

 $(document).ready(function() { $('input[type="checkbox"]').click(function() { var inputValue = $(this).val(); if($(this).is(':checked')){ $("." + inputValue).hide(); }else{ $("." + inputValue).show(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="selectt Eggs Gluten"> <strong>Dough Balls</strong><br/> Cheese dough balls served with chipotle butter.</div> <li> <input type="checkbox" id="checkboxThree" value="Eggs"> <label for="checkboxThree"> Eggs</label> </li> <li> <input type="checkbox" id="checkbox4" value="Gluten"> <label for="checkbox4"> Gluten</label> </li>

Answer 2

I just copied further code from the link

What is happening here is just checkbox from ks-cboxtags class will be affected so any other checkbox will not have this functionality.

when you click on this it will displays div and if its selected div will be hide.

check below snippet for more details.

 $(document).ready(function() { $(".test").click("test"); //ignore this $(".ks-cboxtags input").click(function() { $("."+$(this).val()).show(); $(".ks-cboxtags input:checked").each(function() { $("."+$(this).val()).hide(); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <main class="inline-block-center"> <div class="selectt Gluten" style="display: block;"> <strong style="font-size: 18px;">MEXICAN POPPADOMS</strong><br> Crispy blue corn tortillas with roasted tomato salsa, habanero &amp; pepper salsa, green tomatillo &amp; jalapeño salsa.</div> <div class="selectt Eggs Gluten" style="display: block;"> <strong>PAO DE QUEIJO</strong><br> Traditional Brazilian cheese dough balls served with chipotle butter.</div> <div class="selectt Gluten" style="display: block;"> <strong>PERUVIAN BOTIJA OLIVES</strong><br> In a herby marinade.</div> <div class="selectt Milk Gluten" style="display: block;"> <strong>TEQUENOS</strong> <br> A popular Venezuelan street food; cheese filled fried bread sticks served with chipotle butter.</div> </main> <ul class="ks-cboxtags"> <li> <input type="checkbox" id="checkboxOne" value="Gluten"> <label for="checkboxOne"> Gulten</label> </li> <li> <input type="checkbox" id="checkboxTwo" value="Crustaceans"> <label for="checkboxTwo"> Crustaceans</label> </li> <li> <input type="checkbox" id="checkboxThree" value="Eggs"> <label for="checkboxThree"> Eggs</label> </li> <li> <input type="checkbox" id="checkboxFour" value="Fish"> <label for="checkboxFour"> Fish</label> </li> <li> <input type="checkbox" id="checkboxFive" value="Peanuts"> <label for="checkboxFive"> Peanuts</label> </li> <li> <input type="checkbox" id="checkboxSix" value="Soy Beans"> <label for="checkboxSix"> Soy Beans</label> </li> <li> <input type="checkbox" id="checkboxSeven" value="Milk"> <label for="checkboxSeven"> Milk</label> </li> <li> <input type="checkbox" id="checkboxEight" value="Tree Nuts"> <label for="checkboxEight"> Tree Nuts</label> </li> <li> <input type="checkbox" id="checkboxNine" value="Celery"> <label for="checkboxNine"> Celery</label> </li> <li> <input type="checkbox" id="checkboxTen" value="Mustard"> <label for="checkboxTen"> Mustard</label> </li> <li> <input type="checkbox" id="checkboxEleven" value="Seasame"> <label for="checkboxEleven"> Seasame</label> </li> <li> <input type="checkbox" id="checkboxTweleve" value="Sulphur"> <label for="checkboxTweleve"> Sulphur</label> </li> <li> <input type="checkbox" id="checkboxThirteen" value="Lupin"> <label for="checkboxThirteen"> Lupin</label> </li> </ul>

Answer 3

I've rewritten the code without jQuery, as it doesn't seem to need it...

Here is the pen: https://codepen.io/paulmartin91/pen/ExjgQBJ?editors=1011

JS

    //object containing each allergen. Add them to this object when adding them to the list - always set to false as default
let choices = {
    Eggs: false,
    Gluten: false
  }

let clickedBox  = (input) => {
  //mark the selected allergen as checked
  choices[input.value] = input.checked 
  //returns an array of classes for each element with the selected allergen
  let selected = document.getElementsByClassName(input.value)
  //iterates though array of elements with selected allergen
  for (let i = 0; i < selected.length; i++) {
    //creates an array of classes for each element
    var classList = selected[i].className.split(' ')
    var counter = 0
    classList.forEach(x=>{
      //if the element contains a class that is checked, hide it
      if (choices[x]) {selected[i].style.display = 'none'} else{
        //count the number of classes that aren't checked
        counter++
        //if the element has no classes that are checked, show it
        if (counter == classList.length) {selected[i].style.display = 'block'}
      };
    })
  }
  };

HTML

<div class=" Eggs Gluten"> 
        <strong>Eggs Gluten</strong>
</div>
<div class="Eggs "> 
        <strong>Eggs</strong>
</div>
<div class="Gluten "> 
        <strong>Gluten</strong>
</div>

<li> 
  <input 
         onclick = 'clickedBox(this)' 
         type="checkbox"
         id="checkboxOne" 
         value="Eggs">
  <label for="checkboxOne"> Eggs</label>
  <input 
         onclick = 'clickedBox(this)' 
         type="checkbox"
         id="checkboxTwo" 
         value="Gluten">
  <label for="checkboxTwo"> Gluten</label>

</li>

It now iterates through all the elements that match the class and hide/show them based on the condition of the checked box.

Hope this helps!

Edit: fixed code, should work now!