所以我有一個帶有復選框的下拉串列。
<div id = "dropdown" class ="dropdown">
<div class = "dropdown-row">
<label
<span checkbox" >
</label>
</div>
<div class = "dropdown-row">
<label
<span checkbox" >
</label>
</div>
<div class = "dropdown-row">
<label
<span checkbox" >
</label>
</div>
<div class = "dropdown-row">
<label
<span checkbox" >
</label>
</div>
<div class = "dropdown-row">
<label
<span checkbox" >
</label>
</div>
<div class = "dropdown-row">
<label
<span checkbox" >
</label>
</div>
</div>
我正在嘗試檢查是否選中了復選框，并且只是簡單的文本“嗨”。但它不起作用。我不確定，但我正在嘗試使用 type="checkbox" 獲取所有輸入，并在單擊時為每個復選框添加事件監聽器。
const checkboxes = document.querySelectorAll('input[type="checkbox"]')
for (let i = 0; i < checkboxes.length; i ) {
checkboxes[i].addEventListener("click", function() {
if (checkboxes[i].checked) {
alert("Hi")
}
})
}
uj5u.com熱心網友回復：
為事件添加事件偵聽器change。每當檢查并未選中復選框時，它會觸發。用于this.checked驗證復選框是否被選中。請注意，this此處使用關鍵字是安全的，因為函式 inaddEventListener是常規函式而不是箭頭函式。
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < checkboxes.length; i ) {
checkboxes[i].addEventListener("change", function() {
if (this.checked) {
console.log(`Hi from Checkbox #${i 1}`);
}
})
}<div id="dropdown" class="dropdown">
<div class="dropdown-row">
<label>
<span class="text-space">Item 1</span>
<input type="checkbox" class="clickable">
</label>
</div>
<div class = "dropdown-row">
<label>
<span class="text-space">Item 2</span>
<input type="checkbox" class="clickable">
</label>
</div>
<div class = "dropdown-row">
<label>
<span class="text-space">Item 3</span>
<input type="checkbox" class="clickable">
</label>
</div>
<div class = "dropdown-row">
<label>
<span class="text-space">Item 4</span>
<input type="checkbox" class="clickable">
</label>
</div>
<div class = "dropdown-row">
<label>
<span class="text-space">Item 5</span>
<input type="checkbox" class="clickable">
</label>
</div>
<div class = "dropdown-row">
<label>
<span class="text-space">Item 6</span>
<input type="checkbox" class="clickable">
</label>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/504141.html
標籤：javascript