從 CheckBox 顯示多個選定的選中值

Question

我已經將 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>

Answer 1

在這里，我們在 DOM 加載 (window.onload) 時設置了一個事件偵聽器，並且每次單擊復選框時，我們都會檢查所有選中的框，並獲取它們的parentNode.innerText進行顯示。 我還必須更改外部容器 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>

Answer 2

你的 if 條件是錯誤的。

在循環中，您不會更改項目的計數器。
此外，checkbox 是 li 的子控件。

所以，你的 if 條件應該是這樣的

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

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 顯示多個選定的選中值

問題描述

3 個解決方案

解決方案1
1 已采納 2021-06-03 03:25:29

解決方案2
0 2021-06-03 03:20:24

解決方案3
0 2021-06-03 04:51:24

從 CheckBox 顯示多個選定的選中值

問題描述

3 個解決方案

解決方案1 1 已采納 2021-06-03 03:25:29

解決方案2 0 2021-06-03 03:20:24

解決方案3 0 2021-06-03 04:51:24

解決方案1
1 已采納 2021-06-03 03:25:29

解決方案2
0 2021-06-03 03:20:24

解決方案3
0 2021-06-03 04:51:24