这是我所拥有的,所以我有一个很长的复选框列表,如果它们被选中,我想以文本形式显示它们,我正在考虑使用以下代码,但我遇到的问题是如果他们选中和取消选中复选框,它会多次显示有关如何解决此问题的任何建议?
.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 = '';
目前,您只是总是在添加已经存在的东西......