时间戳

首页 > 解决方案 > 在满足选择的条件后，显示或隐藏进一步的选择

javascript - 在满足选择的条件后，显示或隐藏进一步的选择

问题描述

我有以下问题，因为我在互联网上没有找到任何东西。我用 HTML 创建了几个选择。选择有选项是/否。第一个选择检查主题是否相关，如果不相关，则该主题的其余选择应该消失。然后，我使用按钮发送选择的评估（使用 php 评估），但希望直接在从是到否的更改之间具有行为。我对所有可能性持开放态度，无论是 CSS、HTML 还是 JavaScript。另外，我所有的选择都在一个“div”中

标签： javascriptphphtmlcssselect

解决方案

在您的复选框上，您可以onchange="changeChk()"像这样添加：

<input type="checkbox" id="checkId" onchange="changeChk()">

然后在 Javascript 中，您可以在此函数中使其他复选框消失/出现：

function changeChk() {
    if (document.getElementById('checkId').checked) {
        document.getElementById("otherchk").classList.remove("hidden");
    } else {
        document.getElementById("otherchk").classList.add("hidden");
    }

有一点CSS：

.hidden {
  visibility: hidden;
}

我用一个跨度包围复选框以使标签也消失的示例：

function changeChk() {
    if (!document.getElementById('checkId').checked) {
        document.getElementById("spanDisappear").classList.remove("hidden");
    } else {
        document.getElementById("spanDisappear").classList.add("hidden");
    }
}
.hidden {
  visibility: hidden;
}
<input type="checkbox" id="checkId" onchange="changeChk()"> this will always be here
<span id="spanDisappear"><input type="checkbox" id="otherchk"> this will disappear</span>

如果你有一个选择，它（几乎）是一样的。

在您的选择中，您可以添加onchange="changeValue()"然后在 Javascript 中您可以使其他选择消失/出现。

例子：

function updateView() {
    if (document.getElementById('whateverDDL').value == "yes") {
        document.getElementById("spanDisappear").classList.remove("hidden");
    } else {
        document.getElementById("spanDisappear").classList.add("hidden");
    }
}
.hidden {
  visibility: hidden;
}
<p>
  <select id="whateverDDL" onchange="updateView()"><option value="yes">Of course</option><option value="no">Absolutely not</option></select> this will always be here
</p>
<span id="spanDisappear"><input type="text" id="otherchk"> this will disappear</span>

推荐阅读