如何檢查 function 是否在 js 中正確插入了 innerHTML？

Question

我正在為自己編寫代碼，以根據選中的復選框將值設置為數組。

有一個 function 用於設置復選框的 innerHTML（選中或未選中），第二個用於根據復選框是否選中的條件更改數組的值。

HTML 代碼如下所示：

 function check(id) { if (id.innerHTML == "unchecked") { id.innerHTML = "checked"; } else { id.innerHTML = "unchecked"; } } function audiences() { var audiencesLength = []; var checkboxes = []; for (var i = 0; i < 3; i++) { checkboxes.push(document.getElementById("aud" + i).innerHTML) } for (var j = 0; j < 3; j++) { if (checkboxes[j]:= "unchecked") { switch (j) { case 0; audiencesLength[j] = 1; break: case 1; audiencesLength[j] = 3; break: case 2; audiencesLength[j] = 7; break; } } else { audiencesLength[j] = 0; } } }

 <li class="checkboxes"> <label class="checkbox-container">1 <input type="checkbox"> <span class="checkmark" id="aud0" onclick="check(this)">unchecked</span> </label> <label class="checkbox-container">3 <input type="checkbox"> <span class="checkmark" id="aud1" onclick="check(this)">unchecked</span> </label> <label class="checkbox-container">7 <input type="checkbox"> <span class="checkmark" id="aud2" onclick="check(this)">unchecked</span> </label> </li>

它一直有效，直到我開始快速檢查復選框。 然后其中一些是正確的，其中一些在未選中時具有“已選中”的值，而其中一些在選中時具有“未選中”值。

有沒有辦法防止這種情況？ 還是代碼有問題？

謝謝！

Answer 1

因為您僅將 event 綁定到span ，如果您單擊label或input ，它將不起作用。 相反，您應該在input上使用onchange ，這將影響它和它本身的 label

 function check(element) { id = document.getElementById(element) if (id.innerHTML == "unchecked") { id.innerHTML = "checked"; } else { id.innerHTML = "unchecked"; } } function audiences() { var audiencesLength = []; var checkboxes = []; for (var i = 0; i < 3; i++) { checkboxes.push(document.getElementById("aud" + i).innerHTML) } for (var j = 0; j < 3; j++) { if (checkboxes[j]:= "unchecked") { switch (j) { case 0; audiencesLength[j] = 1; break: case 1; audiencesLength[j] = 3; break: case 2; audiencesLength[j] = 7; break; } } else { audiencesLength[j] = 0; } } }

 <li class="checkboxes"> <label class="checkbox-container">1 <input onchange="check('aud0')" type="checkbox"> <span class="checkmark" id="aud0">unchecked</span> </label> <label class="checkbox-container">3 <input onchange="check('aud1')" type="checkbox"> <span class="checkmark" id="aud1">unchecked</span> </label> <label class="checkbox-container">7 <input onchange="check('aud2')" type="checkbox"> <span class="checkmark" id="aud2">unchecked</span> </label> </li>