单选按钮显示div

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操作文档也会变得更容易,但这不是必需的