Javascript 隐藏字段集'；当选中单选按钮时，不进行更改

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

<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中完全控制这些字段集的可见性。所以在我的html中没有onchange或onclick

有人有小费吗？

document.getElementById（'forproject'）。addEventListener（'onChange'，hideInternship）
函数hideInternship（事件）{
if（event.target.checked）
{
document.getElementById（'interporation'）.style.visibility='hidden'；
document.getElementById（'project'）.style.visibility='visible'；
}
}

document.getElementById（'forproject'）。addEventListener（'onChange'，hideInternship）
函数hideInternship（事件）{
if（event.target.checked）
{
document.getElementById（'interporation'）.style.visibility='hidden'；
document.getElementById（'project'）.style.visibility='visible'；
}
}

您可以将函数“附加”到JavaScript文件上的onclick

在JS外部文件（以及函数外部）中包含以下内容是一个简单（粗略）的示例：

document.getElementById('forinternship').onclick = function() {
    if (this.checked)
    {
    document.getElementById('internship').style.visibility='hidden';
    document.getElementById('project').style.visibility='visible';
    }
}
document.getElementById('forproject').onclick = function() {
    if (this.checked)
    {
    document.getElementById('project').style.visibility='hidden';
    document.getElementById('internship').style.visibility='visible';    
    } 
}

这样，您就可以删除HTML元素上的onclick属性。 您可以去掉这些函数（它们直接在示例代码的onclick上创建）

您可以将函数“附加”到JavaScript文件上的onclick

在JS外部文件（以及函数外部）中包含以下内容是一个简单（粗略）的示例：

document.getElementById('forinternship').onclick = function() {
    if (this.checked)
    {
    document.getElementById('internship').style.visibility='hidden';
    document.getElementById('project').style.visibility='visible';
    }
}
document.getElementById('forproject').onclick = function() {
    if (this.checked)
    {
    document.getElementById('project').style.visibility='hidden';
    document.getElementById('internship').style.visibility='visible';    
    } 
}

这样，您就可以删除HTML元素上的onclick属性。

---

您可以去掉这些函数（它们直接在示例代码的onclick上创建）

< P>您也可以考虑委派，其中一个侦听器在父元素上：

window.onload=function（）{
document.getElementById（'f0'）。addEventListener（'click'，函数（evt）{
var tgt=evt.target；
如果（tgt.id=='forproject'| | tgt.id=='forinterporation'）{
document.getElementById（'project'）。style.visibility=document.getElementById（'forproject'）。选中？'visible'：'hidden'；
document.getElementById（“实习”）.style.visibility=document.getElementById（“实习”）。选中“可见”：“隐藏”；
}
});
}

注册
项目
实习
项目
实习
>P>您也可以考虑委托，其中单个侦听器位于父元素上：


window.onload=function（）{
document.getElementById（'f0'）。addEventListener（'click'，函数（evt）{
var tgt=evt.target；
如果（tgt.id=='forproject'| | tgt.id=='forinterporation'）{
document.getElementById（'project'）。style.visibility=document.getElementById（'forproject'）。选中？'visible'：'hidden'；
document.getElementById（“实习”）.style.visibility=document.getElementById（“实习”）。选中“可见”：“隐藏”；
}
});
}

注册
项目
实习
项目
实习
您是否在此项目中使用jQuery？不，不允许..：（您在这个项目中使用jQuery吗？不，不允许……：（感谢您的快速回复，但我得到一个未捕获的类型错误：无法设置的属性'onclick'null@Maarten，该错误表示
document.getElementById（'forInterporation'）
或
document.getElementById（'forproject'））
找不到输入的单选元素。您是否更改了问题示例的HTML？无论如何，我看到您已经找到了答案。感谢您的快速回复，但我收到一个未捕获的类型错误：无法设置的属性“onclick”null@Maarten，该错误表示
document.getElementById（'ForInterporation'））
或
document.getElementById（'forproject'））
找不到输入的无线电元素。您是否更改了问题示例的HTML？无论如何，我看到您已经找到了答案。感谢您的快速回复。遗憾的是，我收到一个未捕获的类型错误：无法读取Null的属性“addEventListener”您是否在页面底部加载JS文件？就是这样，对不起，我的错误！Thanks a lot=D感谢您的快速回复。很遗憾，我收到了一个未捕获的类型错误：无法读取Null的属性'addEventListener'。您是否正在将JS文件加载到页面底部？就是这样，对不起，我的错误！非常感谢