Javascript onchange 复选框取消

Question

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

\n\n

我为我的模块订单系统创建了一个 onchange 事件。当我单击该复选框时，所选模块将显示在摘要中。这有效。但是当我取消选择该复选框时，我希望该模块从摘要中消失。现在不行了。我需要在 JS 中更改什么才能做到这一点？

\n\n

复选框

\n\n

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

\n\n

摘要

\n\n

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

\n\n

JavaScript

\n\n

function modulecontractsSelect() {\n    document.getElementById("module-contracts-summary").innerHTML = "Module contractbeheer"\n    document.getElementById("module-contracts-summary-price").innerHTML = "\xe2\x82\xac5 / mnd";\n}\n

\n\n

提前致谢！

\n

Answer 1

首先，更改您的checkbox事件onchange以仅传递 itlsef (as this) 作为参数。您实际上并不需要将事件作为参数传递：

\n\n

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

\n\n

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

\n\n

                                   \xe2\x96\xbc\nfunction modulecontractsSelect(checkbox) {\n    if (checkbox.checked) {\n       document.getElementById("module-contracts-summary").innerHTML = "Module contractbeheer"\n       document.getElementById("module-contracts-summary-price").innerHTML = "\xe2\x82\xac5 / mnd";\n    }\n    else {\n       document.getElementById("module-contracts-summary").innerHTML  = "";\n       document.getElementById("module-contracts-summary-price").innerHTML  = "";\n    }\n}\n

\n