javascript - 单选按钮显示 div

Question

所以，我正在为一个项目制作一个网站。我有 2 个单选按钮，如果单选按钮:"is"被选中，则在选中单选按钮时必须在同一页面上显示一个 div。当单选按钮“否”被选中时，什么都不会发生，并且 div 不应显示。 这是正在尝试的事情，但它就是行不通。我不知道出了什么问题，也无法在网上找到解决方案。

这是我的代码:

<?php $ervaringja = 0; ?>

    Hebt u enige ervaring met Fitnessen? 
    <input type="radio" name="ErvaringJa_Nee"
    <?php if (isset($Ervaring) && $Ervaring=="Ja") $ervaringja = 1;?>
    value="Ja">Ja
    <input type="radio" name="ErvaringJa_Nee"
    <?php if (isset($Ervaring) && $Ervaring=="Nee") echo "checked";?>
    value="Nee">Nee<br>

    <?php 
    if ($ervaringja == 0){
        echo '<script>'. 'ervaringjanee()'. '</script>';
    }
    ?>

和脚本:

<script>
    function ervaringjanee() 
        {
            document.getElementById("WelkeErvaring").style.display = "hidden";
        }
</script>

但是 div 一直出现，有人可以帮助我吗？

Answer 1

要隐藏一个元素，不是display: hidden;，而是display: none;。

此外，您用 PHP 编写的内容仅在页面加载时完成。要使用 PHP 更改页面，您必须重新加载它。您在 JavaScript 中所做的事情随时都可能发生。它通常对用户触发的事件使用react。

我建议只让 JavaScript 负责显示/隐藏 div。类似于下面的代码:

Hebt u enige ervaring met Fitnessen?
<input type="radio" name="ErvaringJa_Nee" value="Ja"
    <?php if (isset($Ervaring) && $Ervaring == "Ja") {echo 'checked="checked"';} ?>
/>
<input type="radio" name="ErvaringJa_Nee" value="Nee"
    <?php if (!isset($Ervaring) || $Ervaring == "Nee") { echo 'checked="checked"';} ?>
/>
<div id="WelkeErvaring">
    ....
</div>

<script>
var div = document.getElementById("WelkeErvaring");
var ja = document.querySelector("input[name=ErvaringJa_Nee][value=Ja]");
var nee = document.querySelector("input[name=ErvaringJa_Nee][value=Nee]");
function toggleDiv() {
    if (ja.checked) {
        div.style.display = "block";
    } else {
        div.style.display = "none";
    }
};
toggleDiv();
ja.addEventListener("change", toggleDiv);
nee.addEventListener("change", toggleDiv);
</script>

如果使用 jQuery 插件或类似插件，使用 JavaScript 操作文档也会变得更容易，但这不是必需的