Toggle display on multiple divs, on checkboxes click

Question

What I am trying to do is showing a div when clicking a related checkbox, without using any jQuery.

I also want to hide the div when the checkbox is unchecked.

It's pretty simple with only one checkbox, as I managed to do it.

For some reason, I can't manage to make it work on multiple checkboxes (and their related divs).

I tried many approaches but none of them work, so my understanding of the problem must be wrong.

Here is a simplified version of my code.

HTML :

<div>
    <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay()"/>
    <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay()"/>
    <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay()"/>
    <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay()"/>
    <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay()"/>
    <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay()"/>
    <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay()"/>
</div>

<div>
    <div class="row" style="display:none;" id="lundi">Some content</div>
    <div class="row" style="display:none;" id="mardi">Some content</div>
    <div class="row" style="display:none;" id="mercredi">Some content</div>
    <div class="row" style="display:none;" id="jeudi">Some content</div>
    <div class="row" style="display:none;" id="vendredi">Some content</div>
    <div class="row" style="display:none;" id="samedi">Some content</div>
    <div class="row" style="display:none;" id="dimanche">Some content</div>
</div>

and my JS :

function addDay() {

    let tabDays = [];
    let checked = document.querySelectorAll("input[type='checkbox']:checked");
    for (let i = 0; i < checked.length; i++) {
        tabDays.push(document.querySelector("#" + checked[i].value));
        tabDays.forEach(function (day) {
            if (tabDays.includes(document.querySelector("#" + checked[i].value))) {
                day.style.display = jour.style.display === "none" ? "block" : "none";
            }
        })

    }
}

Many thanks

Answer 1

You're doing a lot of extra work by not passing a context into your addDay function.

Just add this (which references the DOM element the onclick handler is registered to) to the checkbox element arguments. Then use the built in DOM methods to update style.

HTML

  <div>
    <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)"/>
  </div>

  <div>
      <div class="row" id="lundi">Some content</div>
      <div class="row" id="mardi">Some content</div>
      <div class="row" id="mercredi">Some content</div>
      <div class="row" id="jeudi">Some content</div>
      <div class="row" id="vendredi">Some content</div>
      <div class="row" id="samedi">Some content</div>
      <div class="row" id="dimanche">Some content</div>
  </div>

CSS

.row {
  display: none;
}

JS

function addDay(checkbox) {
  var row = document.querySelector('#' + checkbox.value);
  if (!row) return;

  row.style.display = checkbox.checked ? 'block' : 'none';
}

Answer 2

This should also do the job hopefully you can learn the principle of it.

function addDay(element) {
if(element.checked){
document.getElementById(element.value).style.display = "block";
} else {
document.getElementById(element.value).style.display = "none";
}
}

<div>
    <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)"/>
</div>

<div>
    <div class="row" style="display:none;" id="lundi">Some content</div>
    <div class="row" style="display:none;" id="mardi">Some content</div>
    <div class="row" style="display:none;" id="mercredi">Some content</div>
    <div class="row" style="display:none;" id="jeudi">Some content</div>
    <div class="row" style="display:none;" id="vendredi">Some content</div>
    <div class="row" style="display:none;" id="samedi">Some content</div>
    <div class="row" style="display:none;" id="dimanche">Some content</div>
</div>

We can pass the element in the html by using:

onclick="addDay(this)"

Now we have access to the DOM element in our javascript code and can use the properties of it.

element.checked  // returns true or false based on if the element is checked

element.value // returns the value which is determined by the value attribute

Answer 3

If you want to make it more clean and remove multiple loops then remove the onClick from checkboxes and just listen to its click event and based on that show hide Elements

(function() {
 let checkBoxes = document.querySelectorAll("input[type='checkbox']");
 for (let i = 0; i < checkBoxes.length; i++) { 
        checkBoxes[i].addEventListener('click', function(e) {
      if (e.target.checked) {
        document.getElementById(e.target.value).style.display = 'block';
      } else {
        document.getElementById(e.target.value).style.display = 'none';
      }
    });
    }
})();

Answer 4

You can just pass the element into your function and because it has the value which corresponds to the id of the element you want to hide/show you don't need to search for anything.

function addDay(e) {
  document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}

<div>
  <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />
  <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />
  <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />
  <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />
  <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />
  <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />
  <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />
</div>

<div>
  <div class="row" style="display:none;" id="lundi">Some content</div>
  <div class="row" style="display:none;" id="mardi">Some content</div>
  <div class="row" style="display:none;" id="mercredi">Some content</div>
  <div class="row" style="display:none;" id="jeudi">Some content</div>
  <div class="row" style="display:none;" id="vendredi">Some content</div>
  <div class="row" style="display:none;" id="samedi">Some content</div>
  <div class="row" style="display:none;" id="dimanche">Some content</div>
</div>