如何取消勾选复选框，如果一个是未选中使用javascript？

我有一系列的复选框，我用来增加价格，因为他们被选中。
我的问题是，我必须取消选中他们一个接一个，如果我想看到价格下降。我希望能够取消选中中间的一个复选框，并有以下自动取消选中。

例如：Price = 100 if checkbox1.checked --〉Price = 120 if checkbox2.checked --〉checkbox1.checkedandPrice = 140 if checkbox3.checked --〉checkbox1.checkedandcheckbox2.checkedandPrice = 160 etc.
我希望能够做的：如果我取消选中checkbox 2--〉checkbox 3未选中且价格= 120

<label><input type="checkbox" value="20" class="tarifsuppl" id="P3" onclick="functionProjets()"><span></span></label>
    <label><input type="checkbox" value="20" class="tarifsuppl" id="P4" onclick="functionProjets()"><span></span></label>
    <label><input type="checkbox" value="20" class="tarifsuppl" id="P5" onclick="functionProjets()"><span></span></label>
    <label><input type="checkbox" value="20" class="tarifsuppl" id="P6" onclick="functionProjets()"><span></span></label>
    <label><input type="checkbox" value="20" class="tarifsuppl" id="P7" onclick="functionProjets()"><span></span></label>
    <p id="txtP3">OK 3</p>
    <p id="txtP4">OK 4</p>
    <p id="txtP5">OK 5</p>
    <p id="txtP6">OK 6</p>
    <p id="txtP7">OK 7</p>

这里是我的js：

function functionProjets() {
    // get the checkbox
    var P3 = document.getElementById("P3");
    var P4 = document.getElementById("P4");
    var P5 = document.getElementById("P5");
    var P6 = document.getElementById("P6");
    var P7 = document.getElementById("P7");
    // get the text output
    var txtP3 = document.getElementById("txtP3");
    var txtP4 = document.getElementById("txtP4");
    var txtP5 = document.getElementById("txtP5");
    var txtP6 = document.getElementById("txtP6");
    var txtP7 = document.getElementById("txtP7");

    // if a checkbox is checked, but not others > display corresponding output
    if (P3.checked === false && P4.checked === false && P5.checked === false && P6.checked === false && P7.checked === false) {
        txtP3.style.display = "none";
        txtP4.style.display = "none";
        txtP5.style.display = "none";
        txtP6.style.display = "none";
        txtP7.style.display = "none";
    }
    else if (P3.checked === true && P4.checked === false && P5.checked === false && P6.checked === false && P7.checked === false) {
        txtP3.style.display = "block";
        txtP4.style.display = "none";
        txtP5.style.display = "none";
        txtP6.style.display = "none";
        txtP7.style.display = "none";
    }
    else if ((P3.checked === false || true) && P4.checked === true && P5.checked === false && P6.checked === false && P7.checked === false) {
        P3.checked = true;
        txtP4.style.display = "block";
        txtP3.style.display = "none";
        txtP5.style.display = "none";
        txtP6.style.display = "none";
        txtP7.style.display = "none";
    }
    else if ((P3.checked === false || true) && (P4.checked === false || true) && P5.checked === true && P6.checked === false && P7.checked === false) {
        P3.checked = true; P4.checked = true;
        txtP5.style.display = "block";
        txtP3.style.display = "none";
        txtP4.style.display = "none";
        txtP6.style.display = "none";
        txtP7.style.display = "none";
    }
    else if ((P3.checked === false || true) && (P4.checked === false || true) && (P5.checked === false || true) && P6.checked === true && P7.checked === false) {
        P3.checked = true; P4.checked = true;
        P5.checked = true;
        txtP6.style.display = "block";
        txtP3.style.display = "none";
        txtP4.style.display = "none";
        txtP5.style.display = "none";
        txtP7.style.display = "none";
    }
    else if ((P3.checked === false || true) && (P4.checked === false || true) && (P5.checked === false || true) && (P6.checked === false || true) && P7.checked === true) {
        P3.checked = true;
        P4.checked = true;
        P5.checked = true;
        P6.checked = true;
        txtP7.style.display = "block";
        txtP3.style.display = "none";
        txtP4.style.display = "none";
        txtP5.style.display = "none";
        txtP6.style.display = "none";
    }
}

如果我对任务的理解正确的话，这是可以这样实现的

const elements = [];

addEventListener("DOMContentLoaded", init);

function init() {
  for (let index=3; index<=7; index ++)
  {
    elements.push({
      check: document.getElementById("P" + index),
      text: document.getElementById("txtP" + index)
    });
  }
}

function functionProjets(element) {
    const selectedIndex = elements.findIndex((el) => el.check === element);
    let lastChecked = -1;
    for (let index=0; index<elements.length; index ++)
    {
      el = elements[index];
      if (index !== selectedIndex) {
        el.check.checked = index <= selectedIndex;
      }
      if (el.check.checked) {
        lastChecked = index;
      }
      el.text.style.display = "none";
    }
    if (lastChecked >= 0) {
      elements[lastChecked].text.style.display = "block";
    }
}

<label><input type="checkbox" value="20" class="tarifsuppl" id="P3" onclick="functionProjets(this)"><span></span></label>
<label><input type="checkbox" value="20" class="tarifsuppl" id="P4" onclick="functionProjets(this)"><span></span></label>
<label><input type="checkbox" value="20" class="tarifsuppl" id="P5" onclick="functionProjets(this)"><span></span></label>
<label><input type="checkbox" value="20" class="tarifsuppl" id="P6" onclick="functionProjets(this)"><span></span></label>
<label><input type="checkbox" value="20" class="tarifsuppl" id="P7" onclick="functionProjets(this)"><span></span></label>
<p id="txtP3">OK 3</p>
<p id="txtP4">OK 4</p>
<p id="txtP5">OK 5</p>
<p id="txtP6">OK 6</p>
<p id="txtP7">OK 7</p>

请让我知道这是否有帮助。

如何取消勾选复选框，如果一个是未选中使用javascript？

1条答案

相关问题

热门标签

最新问答