时间戳

首页 > 解决方案 > 从 CheckBox 显示多个选定的选中值

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

问题描述

我已经将 HTML 文件中的项目列表放在一起，每次我检查列表中的项目时，我希望它出现在“过滤器将在此处显示为按钮”的位置，我已经运行了一个 console.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>

标签： javascripthtmlcsscheckbox

解决方案

在这里，我们在 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>

推荐阅读