Javascript onchange复选框取消

Question

我在这里的第一个问题，真的希望能学到很多东西。我实际上不是我创业公司的技术人员，而是因为缺乏尝试自己做事的原因:-)

我为我的模块订购系统创建了一个 onchange 事件。当我单击复选框时，所选模块会出现在摘要中。这行得通。但是当我取消选中该复选框时，我希望模块从摘要中消失。现在不行了。我必须在 JS 中进行哪些更改才能做到这一点？

复选框

<input type="checkbox" class="custom-control-input" 
  onchange="modulecontractsSelect(this, event)">

总结

<p id="module-contracts-summary"> </p>
<p id="module-contracts-summary-price"> </p>

Javascript

function modulecontractsSelect() {
    document.getElementById("module-contracts-summary").innerHTML = "Module contractbeheer"
    document.getElementById("module-contracts-summary-price").innerHTML = "€5 / mnd";
}

提前致谢！

Answer 1

首先，将checkbox 的onchange 事件更改为仅传递itlsef（如this）作为参数。您实际上不需要将事件作为参数传递：

<input type="checkbox" class="custom-control-input" onchange="modulecontractsSelect(this);">

然后，更改您的 modulecontractsSelect 函数以接收复选框 (this) 作为参数（我用下面的箭头为您突出显示了它）。如果复选框为checked，则设置innerHTML 值。如果不是checked，则设置为空字符串：

                                   ▼
function modulecontractsSelect(checkbox) {
    if (checkbox.checked) {
       document.getElementById("module-contracts-summary").innerHTML = "Module contractbeheer"
       document.getElementById("module-contracts-summary-price").innerHTML = "€5 / mnd";
    }
    else {
       document.getElementById("module-contracts-summary").innerHTML  = "";
       document.getElementById("module-contracts-summary-price").innerHTML  = "";
    }
}

Answer 2

将您的复选框代码更改为：

<input type="checkbox" class="custom-control-input" onchange="modulecontractsSelect(this.checked)">

然后将您的 modulecontractsSelect 函数更改为：

function modulecontractsSelect(is_checked) {
    if( is_checked ) {
        document.getElementById("module-contracts-summary").innerHTML = "Module contractbeheer"
        document.getElementById("module-contracts-summary-price").innerHTML = "€5 / mnd";
    } else {
        document.getElementById("module-contracts-summary").innerHTML = "";
        document.getElementById("module-contracts-summary-price").innerHTML = "";
    }
}

请注意我没有测试过这段代码，但你应该明白了。