Show/Hide divs with data-attribute based on checkboxex checked

Question

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?

Answer 1

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>

Answer 2

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>