javascript - 通过选择显示下一个字段集

标签 javascript html toggle show fieldset

一个简单的问题,对于我的前端开发类(class),我必须制作一个包含多个字段集的表单。我做到了,一切顺利,但现在下一个任务是通过做出选择来显示下一个字段集。

Ik wil mijn aanmelden: Vooreen项目

            <input id="Stage" type="radio"/>
            <label for="Stage">Als stagebedrijf</label>

在上面你会找到我的代码,它必须发生。用户需要做出选择,“voor een project”或“als stagebedrijf”。我知道我必须用 javascript 来做到这一点,所以我已经创建了一个文件。它不能在 HTML 文件中使用 onClick。

所以我的问题是,我该怎么做?

非常感谢!

最佳答案

您可以使用 'addEventListener' method 添加事件处理程序。

这是一个 fiddle :

http://jsfiddle. net/bj0mba74/1/

(您必须删除链接中的空格。

HTML:

<form>
     <input id="radio_1" name="my_radio" type="radio"/>
     <label for="radio_1">Radio 1</label>
     <input id="radio_2" name="my_radio" type="radio"/>
     <label for="radio_2">Radio 2</label>
  <fieldset>
      <input type="text" value="Fieldset 1" />
  </fieldset>
  <fieldset>
      <input type="text" value="Fieldset 2" />
  </fieldset>
</form> 

JS:

function enableFieldset1 () {
    /* Code to enable fieldset 1 goes here. */
    alert('Enable fieldset 1');
}

function enableFieldset2 () {
    /* Code to enable fieldset 2 goes here. */
    alert('Enable fieldset 2');
}

document.getElementById('radio_1').addEventListener('click', enableFieldset1);
document.getElementById('radio_2').addEventListener('click', enableFieldset2);

关于javascript - 通过选择显示下一个字段集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26214348/

相关文章:

javascript - 用于更改价格和订单链接的 JQUERY 切换

javascript - 我们可以在 CouchDb 中对排序 ListView 进行排序吗?

javascript - md- datePicker - 日期实例总是错误

javascript - HTML 中的 SVG 文件

Javascript 切换元素的显示不工作

javascript - 显示和隐藏div

javascript - 触发手机的多选框

javascript - Twitter API XSS 解决方法

html - 我将样式设置为移动但图像不会移动

javascript - 交换div在某个索引处的位置