mercredi 2 juin 2021

Display Multiple Selected Checked Values from a CheckBox

I have put together together a list of items in an HTML file and each time I check an item in the list I want it to appear where it says "Filter will display here" as a button" I've run a console.log over the js code and it says: "item not checked."

const headerTag = document.querySelector('.header-tag');
const list = document.querySelectorAll('.checkbox li')

const listItems = [...list];

for(let i = 0; i < listItems.length; i++) {
      if(listItems.checked === true) {
        console.log('item checked');
      } else {
        console.log('item not checked');
      }
}
.header-tag {
    display: contents;
}
</head>
<body>
  <div class="header-tag">
    <p class="header-tag">Filter will display here</p>
  <ul class="checkbox">
    <li> 
        <input type="checkbox" name="item1" class="item-list">Natural Systems
    </li>
    <li> 
        <input type="checkbox" name="item1" class="item-list">Sustainability Integration 
    </li>
    <li> 
        <input type="checkbox" name="item1" class="item-list">Social Systems
    </li>
  </ul>
</body>

<script src='script.js'></script>
</html>



Aucun commentaire:

Enregistrer un commentaire