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

【问题标题】：Display Multiple Selected Checked Values from a CheckBox从 CheckBox 显示多个选定的选中值
【发布时间】：2021-06-03 12:51:24
【问题描述】：

我已经将一个 HTML 文件中的项目列表放在一起，每次我检查列表中的一个项目时，我希望它出现在“过滤器将在此处显示为按钮”的位置，我运行了一个控制台.log 在 js 代码上，它说：“项目未检查。”

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>

【问题讨论】：

标签： javascript html css checkbox

【解决方案1】：

在这里，我们在 DOM 加载 (window.onload) 时设置了一个事件侦听器，并且每次单击复选框时，我们都会检查所有选中的框，并获取它们的 parentNode.innerText 进行显示。我还必须更改外部容器 div 的类名（它与要显示选中项的标签具有相同的类）。

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>

【讨论】：

【解决方案2】：

你的 if 条件是错误的。

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

所以，你的 if 条件应该是这样的

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

【讨论】：

【解决方案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>

【讨论】：