如何從元素數組中動態獲取元素的值？

Question

我有一個帶有 3 個復選框的表單。 我正在嘗試單擊任何復選框的值。 我能夠獲得硬編碼復選框索引的值（例如 checkbox[0]），但我無法使用 vanilla JS 獲得 checkbox[i] 的值。

 document.addEventListener("DOMContentLoaded", function() { var checkboxes = document.getElementsByClassName('checkbox'); var listType = document.getElementById('ListType'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].addEventListener('click', function() { var inputByIndex = checkboxes[0].value; //I can get the value of the first element, but I can't get the value of whichever checkbox is checked. checkbox[i] doesn't work. listType.classList.add(inputByIndex); var spanType = document.getElementById("type"); spanType.innerText = inputByIndex; }); } });

 input { margin: 20px; } #ListType.basiclist { color: red; } #ListType.accordionlist { color: blue; } #ListType.internalonly { color: pink; }

 <form id="ListTypes"> <label for "basicList"><input type="checkbox" id="basicList" class="checkbox" name="basicList" value="basiclist"/>Basic List</label> <label for "accordionList"><input type="checkbox" id="accordionList" class="checkbox" name="accordionList" value="accordionlist"/>Accordion List</label> <label for "internalOnly"><input type="checkbox" id="internalOnly" class="checkbox" name="internalOnly" value="internalonly" />Internal Use Only</label> </form> <div id="ListType"> List Type: <span id="type"></span> </div>

小提琴

Answer 1

您可以使用event.currentTarget訪問發生事件的元素。

當事件遍歷 DOM 時，Event 接口的 currentTarget 只讀屬性標識事件的當前目標。

 document.addEventListener("DOMContentLoaded", function() { var checkboxes = document.getElementsByClassName('checkbox'); var listType = document.getElementById('ListType'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].addEventListener('click', function(event) { var inputByIndex = event.currentTarget.value; listType.classList.add(inputByIndex); var spanType = document.getElementById("type"); spanType.innerText = inputByIndex; }); } });

 input { margin: 20px; } #ListType.basiclist { color: red; } #ListType.accordionlist { color: blue; } #ListType.internalonly { color: pink; }

 <form id="ListTypes"> <label for "basicList"><input type="checkbox" id="basicList" class="checkbox" name="basicList" value="basiclist"/>Basic List</label> <label for "accordionList"><input type="checkbox" id="accordionList" class="checkbox" name="accordionList" value="accordionlist"/>Accordion List</label> <label for "internalOnly"><input type="checkbox" id="internalOnly" class="checkbox" name="internalOnly" value="internalonly" />Internal Use Only</label> </form> <div id="ListType"> List Type: <span id="type"></span> </div>

Answer 2

在for循環中，使用let而不是var使其工作：

 document.addEventListener("DOMContentLoaded", function() { var checkboxes = document.getElementsByClassName('checkbox'); var listType = document.getElementById('ListType'); for (let i = 0; i < checkboxes.length; i++) { checkboxes[i].addEventListener('click', function() { var inputByIndex = checkboxes[i].value; //I can get the value of the first element, but I can't get the value of whichever checkbox is checked. checkbox[i] doesn't work. listType.classList.add(inputByIndex); var spanType = document.getElementById("type"); spanType.innerText = inputByIndex; }); } });

 input { margin: 20px; } #ListType.basiclist { color: red; } #ListType.accordionlist { color: blue; } #ListType.internalonly { color: pink; }

 <form id="ListTypes"> <label for "basicList"><input type="checkbox" id="basicList" class="checkbox" name="basicList" value="basiclist"/>Basic List</label> <label for "accordionList"><input type="checkbox" id="accordionList" class="checkbox" name="accordionList" value="accordionlist"/>Accordion List</label> <label for "internalOnly"><input type="checkbox" id="internalOnly" class="checkbox" name="internalOnly" value="internalonly" />Internal Use Only</label> </form> <div id="ListType"> List Type: <span id="type"></span> </div>

Answer 3

代表

您需要為多個 listType 顏色考慮 CSS 或使用一組單選按鈕

 document.addEventListener("DOMContentLoaded", function() { document.getElementById('ListTypes').addEventListener("click", function(e) { const tgt = e.target; if (tgt.type && tgt.type === 'checkbox') { const values = [...tgt.form.querySelectorAll("[type=checkbox]:checked")].map(chk => chk.value); document.getElementById("type").textContent = values.join(", ") document.getElementById("ListType").classList.add(...values); } }); });

 input { margin: 20px; } #ListType.basiclist { color: red; } #ListType.accordionlist { color: blue; } #ListType.internalonly { color: pink; }

 <form id="ListTypes"> <label for "basicList"><input type="checkbox" id="basicList" class="checkbox" name="basicList" value="basiclist"/>Basic List</label> <label for "accordionList"><input type="checkbox" id="accordionList" class="checkbox" name="accordionList" value="accordionlist"/>Accordion List</label> <label for "internalOnly"><input type="checkbox" id="internalOnly" class="checkbox" name="internalOnly" value="internalonly" />Internal Use Only</label> </form> <div id="ListType"> List Type: <span id="type"></span> </div>

Answer 4

在onclick函數的關閉中不存在checkboxes列表。 而是使用this.value 。

JS小提琴

Answer 5

您只需要使用您喜歡的方法（我使用querySelectorAll & ）選擇它們，並對它們進行迭代（我使用forEach() ）。

這是您能找到的最簡單的功能。

 const checkboxes = document.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(singleCheckbox => { singleCheckbox.addEventListener('click', () => alert(singleCheckbox.id)) });

 <label for="first">First<input type="checkbox" id="first"/></label> <label for="second">Second<input type="checkbox" id="second"/></label> <label for="third">Third<input type="checkbox" id="third"/></label>

Answer 6

只是為了弄清楚您的代碼的實際問題是什么......

當您click處理程序時， for循環將結束其工作，因此， i的值將變為checkboxes.length ，當然，沒有具有此類索引的復選框，因為它們中的最后一個具有索引(checkboxes.length - 1) 。 所以原因是處理程序內部的代碼是在for循環結束工作后執行的。

其他用戶已經提供了這些解決方案。