满足选择条件后，显示或隐藏进一步选择答案

【问题标题】：After the condition of a select is met, show or hide further selects满足选择条件后，显示或隐藏进一步选择
【发布时间】：2021-07-31 16:11:07
【问题描述】：

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

【问题讨论】：

你是什么意思“复选框可以填写是/否。” ?
我可以在复选框中选择是或否。
复选框不包含书面选项，它们只是一个勾号（打开/选中）或没有勾号（关闭/未选中）。也许向我们展示您的 HTML。
哦，伙计们，我很抱歉。不幸的是，我没有任何复选框，而是选择。然后这些包括是或否。我的错！

标签： javascript php html css select

【解决方案1】：

在您的复选框上，您可以像这样添加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;
}

我用 span 包围复选框以使标签也消失的示例：

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>

【讨论】：

好的，非常感谢。我还有一个问题：“检查”检查了什么？是否勾选“是”，或者我怎么理解。
检查复选框是否被勾选。我添加了一个小提琴，以便您可以尝试该示例。只需点击“运行代码 sn-p”。
对不起。不幸的是，我没有任何复选框，而是选择。然后这些包括是或否。我的错！但这将对我将来有所帮助，谢谢！