CODEWITHSUNDEEP
javascripthtmlcsscheckbox
WeeklyButterfly34
WeeklyButterfly34

Reputation: 101

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>

Upvotes: 0

Views: 64

Answers (3)

dale landry
dale landry

Reputation: 8610

Another way, you can use the event.target and get the nextSibling.nodeValue. Use conditional to see if e.target.checked && arr.includes(e.target.nextSibling.nodeValue) then we push into an array. Second conditional to remove deselected items using index and splice index = arr.indexOf(e.target.nextSibling.nodeValue). To display we set displayEl.textContent = arr.join('- ')

const headerTag = document.querySelector('p.header-tag');
const list = document.querySelectorAll('.checkbox li input')
const arr = []

function getSelected(e) {
  if (e.target.checked && !arr.includes(e.target.nextSibling.nodeValue)) {
    arr.push(e.target.nextSibling.nodeValue)
  }
  if (!e.target.checked) {
    arr.indexOf(e.target.nextSibling.nodeValue) > -1 ?
      arr.splice(arr.indexOf(e.target.nextSibling.nodeValue), 1):null
  }
  return headerTag.textContent = arr.join('- ')
}

list.forEach(item => {
  item.addEventListener('change', getSelected)
})
.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>

Upvotes: 0

Kinglish
Kinglish

Reputation: 23664

Here, we set up an event listener when the DOM load (window.onload) and each time a checkbox is clicked, we take stock of all the checked boxes, grabbing their parentNode.innerText for the display. I also had to change the className you had for the outer container div (it had the same class as the tag where you wanted to display the checked items).

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


window.onload = function() {
  let cb = document.querySelectorAll('input[type="checkbox"]');
  for (let x = 0; x < cb.length; x++) {
    cb[x].addEventListener('change', onCBChange)
  }
}

const onCBChange = (event) => {
  let l = [];
  let ck = document.querySelectorAll('input[type="checkbox"]:checked');
  for (let x = 0; x < ck.length; x++) {
    l.push(ck[x].parentNode.innerText)
  }
  headerTag.innerHTML = l.join(", ");
}
.header-tag {
  display: contents;
}
</head>

<body>
  <div class="header-tag-container">
    <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>

Upvotes: 1

Amit Verma
Amit Verma

Reputation: 2490

your if condition is wrong.

  1. In the loop you are not changing the counter of items.
  2. Also, checkbox is the child control of li.

So, your if condition should be like this

if(listItems[i].children[0].checked === true) {
            console.log('item checked');
          } else {
            console.log('item not checked');
          }

Upvotes: 0

Related Questions