通过做出选择来显示下一个字段集

时间:2014-10-06 10:29:50

标签: javascript html5 toggle show fieldset

一个简单的问题,对于我的前端开发类,我必须创建一个包含多个fieldsets的表单。我做到了并且没关系,但现在下一个分配是通过做出选择来显示下一个字段集。

Ik wil mijn aanmelden:                                  Voor een项目

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

在您的上方,我会找到必须发生的代码。用户需要做出选择,无论是&#34; voor een project&#34;或者&#34; als stagebedrijf&#34;。我知道我必须用javascript做这个,所以我已经做了一个文件。它无法在HTML文件中使用onClick。

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

非常感谢!

1 个答案:

答案 0 :(得分:0)

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

这是一个小提琴:

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);