如何使用JavaScript取消多选选择器并进行减法操作？

Question

我有三个下拉列表。每次从下拉列表中选择一个项目，它就会被添加到总值中，并在标签下方显示出来。当用户单击标签的“X”时，标签将被删除，并且应该从下拉列表中减去该项目的价值。但是，实际上没有进行减法操作。

这是我拥有表单的链接：

https://codepen.io/MoisosxD/pen/gOPpXGQ

您可以通过以下方式将标签删除：

onclick="desmarcarspan1();"

在JS中，可以这样实现：

function desmarcarspan1(){
        var total = document.getElementById("totalGeneral");
        var total1 = new Array(total);
        var NuevoTotal = total.textContent;
        console.log(total.textContent);
        var ans10 = document.getElementById("ans-10");
        ans10.style.display = "none";
    }

但我没有做任何其他事情，我不知道如何做减法并取消选择器的勾选。

- Moises Pachon

---

所以，如果下拉菜单被取消选择，您希望价格回退吗？您的代码对我有效，除了中间的下拉菜单没有被取消选择。这是问题所在吗？ - Hisham Bawa

@HishamBawa 你可以点击底部的标签。我认为用户想要的是，如果你点击标签，元素将被取消选择，该项的价格将从总价中减去。 - Philip F.

Answer 1

如果您将函数sumValues（）设为全局变量，则可以取消下拉元素的选中状态并直接调用该函数：

sumValues（）：

function sumValues() {
    const inputArray = document.querySelectorAll('input.itemTotalNeto');
    console.log(inputArray);
    const totalValue = document.querySelector('#totalGeneral');
    let cboxVals = 0;
    inputArray.forEach(element => cboxVals += element.checked ? parseInt(element.value, 10) : 0);
    totalValue.innerHTML = cboxVals;
}

desmarcspan1()：

function desmarcarspan1() {

    //decheck the dropdown-element:
    document.getElementById('check-1').checked = false;

    //sum up values again
    sumValues();

    var total = document.getElementById("totalGeneral");
    var total1 = new Array(total);
    var NuevoTotal = total.textContent;
    console.log(total.textContent);
    const totalValue = document.querySelector('#totalGeneral');
    var ans1 = document.getElementById("ans-1");
    ans1.style.display = "none";
}

请查看这个可以正常运行的示例： https://codepen.io/PhoenixFlight/pen/eYJNMYm

- Philip F.