Question

所以，我正在为一个项目建立一个网站。我有2个单选按钮，如果选中单选按钮：'是'，则在选中单选按钮时必须在同一页面上显示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中所做的事情随时都可能发生。它通常会对用户触发的事件做出反应。

我建议只让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操作文档也会变得更容易，但这不是必需的

单选按钮显示div

1 个答案: