I have a sequence of divs with some similar data-attributes. I would like that when the user selects the checkbox, the divs corresponding to it appear when checked.

The code works to show divs, but when the checkbox is not selected, divs keep showing up.

.letters{
  display: none;
}

<div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
</div>


<input type="checkbox" value="a">a</br>
<input type="checkbox" value="b">b</br>
<input type="checkbox" value="c">c</br>

const elements = document.querySelectorAll(".letters")
const inputs = document.querySelectorAll("input")

inputs.forEach(item => {
  item.addEventListener('change', () => {

    if (item.checked){

      elements.forEach(e => {
         if (e.getAttribute('data-text') == item.value) {
          e.style.display = "block";
         }else{
          e.style.display = "none";
         }

      })
    }
  })     
})

How to make the divs hide when unchecked and keep the other showing when checked?

I have a sequence of divs with some similar data-attributes. I would like that when the user selects the checkbox, the divs corresponding to it appear when checked.

The code works to show divs, but when the checkbox is not selected, divs keep showing up.

.letters{
  display: none;
}

<div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
</div>


<input type="checkbox" value="a">a</br>
<input type="checkbox" value="b">b</br>
<input type="checkbox" value="c">c</br>

const elements = document.querySelectorAll(".letters")
const inputs = document.querySelectorAll("input")

inputs.forEach(item => {
  item.addEventListener('change', () => {

    if (item.checked){

      elements.forEach(e => {
         if (e.getAttribute('data-text') == item.value) {
          e.style.display = "block";
         }else{
          e.style.display = "none";
         }

      })
    }
  })     
})

How to make the divs hide when unchecked and keep the other showing when checked?

• javascript

5 Answers 5

Please add an else block to hide element when the checkbox is uncheck.

const elements = document.querySelectorAll(".letters");
const inputs = document.querySelectorAll("input");
inputs.forEach(item => {
    item.addEventListener('change', function() {

        if (this.checked) {
            elements.forEach(e => {
                if (e.getAttribute('data-text') == this.value) {
                    e.style.display = "block";
                }
            })
        } else {
            elements.forEach(e => {
                if (e.getAttribute('data-text') == this.value) {
                    e.style.display = "none";
                }
            })
        }
    })
});

.letters {
            display: none;
        }

    <div>
        <div class="letters" data-text="b">B</div>
        <div class="letters" data-text="b">B</div>
        <div class="letters" data-text="b">B</div>
        <div class="letters" data-text="a">A</div>
        <div class="letters" data-text="b">B</div>
        <div class="letters" data-text="c">C</div>
        <div class="letters" data-text="a">A</div>
        <div class="letters" data-text="c">C</div>
        <div class="letters" data-text="a">A</div>
    </div>

    <input type="checkbox" value="a">a</br>
    <input type="checkbox" value="b">b</br>
    <input type="checkbox" value="c">c</br>

You can try this:

const elements = document.querySelectorAll(".letters")
const inputs = document.querySelectorAll("input")

inputs.forEach(item => {
  item.addEventListener('change', () => {

      elements.forEach(e => e.style.display = e.getAttribute('data-text') === item.value && item.checked ? 'block' : 'none');

  })     
})

.letters{
  display: none;
}

<div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
</div>


<input type="checkbox" value="a">a</br>
<input type="checkbox" value="b">b</br>
<input type="checkbox" value="c">c</br>

I added a small bit of CSS (optional) to start the displayed letters as hidden.

Then you need to determine what to do if the checkbox is toggled on/off.

See running demo code below

const elements = document.querySelectorAll(".letters")
const inputs = document.querySelectorAll("input")

inputs.forEach(item => {
  item.addEventListener('change', () => {

    if (item.checked) {
      elements.forEach(e => {
        if (e.getAttribute('data-text') === item.value) {
          e.style.display = "block";
        }
      })
    } else {
      elements.forEach(e => {
        if (e.getAttribute('data-text') === item.value) {
          e.style.display = "none";
        }
      })
    }
  })
})

.letters{
   display: none;
}

<div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
</div>


<input type="checkbox" value="a">a</br>
<input type="checkbox" value="b">b</br>
<input type="checkbox" value="c">c</br>

Right now you only do something when if (item.checked) so that is why nothing happens when you uncheck the checkboxes

Your next problem is you apply styles to every element even if it is not related to the checkbox.

This is a better approach for the function inside your event listener.

      elements.forEach(e => {
         if (e.getAttribute('data-text') !== item.value) {
                return;
         } 

         if (item.checked){
              e.style.display = "block";
         } else {
             e.style.display = "none";
         }
      })

Else block is missing in your code

const elements = document.querySelectorAll(".letters")
const inputs = document.querySelectorAll("input")

inputs.forEach(item => {
  item.addEventListener('change', () => {
    if (item.checked){ 
      elements.forEach(e => {
         if (e.getAttribute('data-text') == item.value) {
          e.style.display = "block";
         }else{
          e.style.display = "none";
         }
      })
    }
    else{
             elements.forEach(e => {
         if (e.getAttribute('data-text') == item.value) {
          e.style.display = "none";
         } 
      })
    }
  })     
})