.innerHTML += id，没有重复

.innerHTML += id, no duplicates

本文关键字：id innerHTML      更新时间：2023-09-26

这是我所拥有的，所以我有一个很长的复选框列表，如果它们被选中，我想以文本形式显示它们，我正在考虑使用以下代码，但我遇到的问题是如果他们选中和取消选中复选框，它会多次显示有关如何解决此问题的任何建议？

.innerHTML += id;

如果您需要更多详细信息，下面是相关代码的代码转储：

爪哇语

function findTotal() {
    var items = new Array();
    var itemCount = document.getElementsByClassName("items");
    var total = 0;
    var id = '';
    for (var i = 0; i < itemCount.length; i++) {
        id = "c" + (i + 1);
        if (document.getElementById(id).checked) {
            total = total + parseInt(document.getElementById(id).value);
            document.getElementById(id).parentNode.classList.add("active");
            document.getElementById(id).parentNode.classList.remove("hover");
            document.getElementById('display').innerHTML += id;
        } else {
            document.getElementById(id).parentNode.classList.remove("active");
            document.getElementById(id).parentNode.classList.add("hover");
        }
    }
    console.log(total);
    document.getElementById('displayTotal').value = total;
}

.HTML

<label class="hover topping" for="c4">
  <input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c4">BABYBEL</label>

注：更多标注分类

以前的答案应该可以。这里是你的代码（见注释"清除容器"此外，我还简化了您的代码。可读性大大提高。也许你应该切换到jQuery，对于你的例子来说要简单得多。

var displayElement = document.getElementById('display'),
    displayTotalElement = document.getElementById('displayTotal');
function findTotal() {
    var items = [],
    itemCount = document.getElementsByClassName("items"),
    total = 0,
    id = '';
    // clear container
    displayElement.innerHTML = "";
    for (var i = 0; i < itemCount.length; i++) {
        id = "c" + (i + 1);
        var element = document.getElementById(id),
            elementsParent = element.parentNode;
        if (element.checked) {
            total = total + parseInt(element.value, 10);
            elementsParent.classList.add("active");
            elementsParent.classList.remove("hover");
            displayElement.innerHTML += id;
        } else {
            elementsParent.classList.remove("active");
            elementsParent.classList.add("hover");
        }
    }
    console.log(total);
    displayTotalElement.value = total;
}

重置循环前的文本：

document.getElementById('display').innerHTML = '';

目前，您只是总是在添加已经存在的东西......

相关文章：