javascript - ShowHide divs with data-attribute based on checkboxex checked - Stack Overflow

admin管理员组

文章数量:1356304

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

Share Improve this question Follow asked Jan 6, 2020 at 5:11 CamileCamile 15311 silver badge88 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 9

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";
         } 
      })
    }
  })     
})

本文标签： javascriptShowHide divs with dataattribute based on checkboxex checkedStack Overflow