使用 JavaScript 隐藏 Fieldset，当单选按钮被选中时，没有 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';
    }
}

=]

Answer 2

您可以 "attach" 对 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 上创建的）。

Answer 3

您还可以考虑委托，其中单个侦听器位于父元素上：

window.onload = function() {
  document.getElementById('f0').addEventListener('click', function(evt) {
    var tgt = evt.target;
    if (tgt.id == 'forproject' || tgt.id == 'forinternship') {
      document.getElementById('project').style.visibility = document.getElementById('forproject').checked? 'visible':'hidden';
      document.getElementById('internship').style.visibility = document.getElementById('forinternship').checked? 'visible':'hidden';
    }
  });
}

<form>
  <fieldset id="f0">
    <legend>Sign up</legend>
    <label for="forproject"><input type="radio" id="forproject" name="register" >project</label>
    <label for="forinternship"><input type="radio" id="forinternship" name="register" >internship</label>
  </fieldset>
  <fieldset id="project">Project</fieldset>
  <fieldset id="internship">Internship</fieldset>
</form>

使用 JavaScript 隐藏 Fieldset，当单选按钮被选中时，没有 onchange

Hide Fieldset's with JavaScript, when radio-button is checked, without onchange

html

javascript

visibility

onchange