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的{{1}}事件更改为仅将itlsef（作为onchange）作为参数传递。您实际上不需要将事件作为参数传递：

this

然后，更改您的<input type="checkbox" class="custom-control-input" onchange="modulecontractsSelect(this);">功能以接收复选框（modulecontractsSelect）作为参数（我用下面的箭头为您突出显示）。如果复选框为this，请设置checked值。如果它不是innerHTML，请将它们设置为空字符串：

checked

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 = "";
    }
}

请注意我没有测试过此代码，但您应该明白这一点。

Javascript onchange复选框取消

2 个答案: