Question

这里有我的所以我有一长串的复选框，我想在文本中显示它们如果检查我正在考虑使用下面的代码，但我遇到的问题是如果他们检查和取消选中一个复选框，它会多次显示有关如何修复此问题的建议吗？

.innerHTML + = id;

如果您需要更多详细信息，请参阅相关代码的代码转储：

的Javascript

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>

注意：更多标签类

Answer 1

以前的答案应该这样做。在这里你的代码（见评论＆＃34;清除容器＆＃34; 此外，我已经简化了你的代码。可读性大大提高。也许你应该切换到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;
}

Answer 2

在循环之前重置文本：

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

目前你总是在添加任何已经存在的东西...

.innerHTML + = id，没有重复

的Javascript

HTML

2 个答案: