从 CheckBox 显示多个选定的选中值

Question

我在 HTML 文件中整理了一个项目列表，每次我检查列表中的一个项目时，我都希望它出现在“过滤器将显示在这里”的地方作为一个按钮”我在 js 代码上运行 console.log，它说：“项目未检查。”

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>

Answer 1

你的if条件是错误的。

在循环中，您没有更改项目的计数器。
另外，checkbox是li的子控件

那么，你的if条件应该是这样的

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

Answer 2

在这里，我们在DOM加载（window.onload）时设置了一个事件监听器，每次点击一个复选框，我们都会清点所有被选中的框，抓取它们的parentNode.innerText 用于显示。我还必须更改外容器 div 的 class 名称（它与要显示选中项目的标签具有相同的 class）。

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>

Answer 3

另一种方法，您可以使用 event.target 并获得 nextSibling.nodeValue。使用条件查看是否 e.target.checked && arr.includes(e.target.nextSibling.nodeValue) 然后我们推入一个数组。第二个条件是使用 index 和 splice 删除取消选择的项目index = arr.indexOf(e.target.nextSibling.nodeValue)。为了显示我们设置 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>

从 CheckBox 显示多个选定的选中值

Display Multiple Selected Checked Values from a CheckBox

html

javascript

css

checkbox