从 CheckBox 显示多个选定的选中值
[英]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."
我已经将 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>
3 个解决方案
解决方案1
1 已采纳 2021-06-03 03:25:29
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.在这里，我们在 DOM 加载 (window.onload) 时设置了一个事件侦听器，并且每次单击复选框时，我们都会检查所有选中的框，并获取它们的parentNode.innerText进行显示。 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).我还必须更改外部容器 div 的 className（它与要显示选中项目的标签具有相同的 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>
解决方案2
0 2021-06-03 03:20:24
your if condition is wrong.你的 if 条件是错误的。
- In the loop you are not changing the counter of items.在循环中，您不会更改项目的计数器。
- Also, checkbox is the child control of li.此外，checkbox 是 li 的子控件。
So, your if condition should be like this所以，你的 if 条件应该是这样的
if(listItems[i].children[0].checked === true) {
console.log('item checked');
} else {
console.log('item not checked');
}
解决方案3
0 2021-06-03 04:51:24
Another way, you can use the event.target and get the nextSibling.nodeValue .另一种方式，您可以使用event.target并获取nextSibling.nodeValue 。 Use conditional to see if e.target.checked && arr.includes(e.target.nextSibling.nodeValue) then we push into an array.使用条件查看是否e.target.checked && arr.includes(e.target.nextSibling.nodeValue)然后我们推入一个数组。 Second conditional to remove deselected items using index and splice index = arr.indexOf(e.target.nextSibling.nodeValue) .第二个条件是使用index和splice index = arr.indexOf(e.target.nextSibling.nodeValue)删除取消选择的项目。 To display we set displayEl.textContent = arr.join('- ')为了显示我们设置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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.