javascript - 当选中单选按钮时，使用 JavaScript 隐藏字段集，无需 onchange

Question

当在 html 表单中选中两个单选按钮之一时，我试图隐藏特定的字段集。 我使用两个带有 id 的单选按钮:“forproject”和“forinternship”。

<form>
<fieldset>
<legend>Sign up</legend>
<label><input type="radio" onchange="hideInternship(this)" id="forproject" name="register" >project</label>
<label><input type="radio" onchange="hideProject(this)" id="forinternship" name="register" >internship</label>
</fieldset>
<fieldset id="project">
</fieldset>
<fieldset id="internship">
</fieldset>
</form>

我在外部 js.file 中编写了两个 JavaScript 函数，以便在选中单选按钮时使用 onchange(在 html 中)隐藏其中一个字段集。

function hideProject(x) {
    if (x.checked)
    {
    document.getElementById('project').style.visibility='hidden';
    document.getElementById('internship').style.visibility='visible';    
    } 
}

function hideInternship(x) {
    if (x.checked)
    {
    document.getElementById('internship').style.visibility='hidden';
    document.getElementById('project').style.visibility='visible';
    }
}

一切工作正常，但我想完全控制 js.file 中这些字段集的可见性。所以我的html中没有onchange或onclick。

有人有提示吗？

Answer 1

document.getElementById('forproject').addEventListener('onChange', hideInternship)
function hideInternship(event) {
    if (event.target.checked)
    {
    document.getElementById('internship').style.visibility='hidden';
    document.getElementById('project').style.visibility='visible';
    }
}

=]