How to change the HTML elements dynamically in my case?

I have a group of radio buttons on my page:

<form ...>
   <input type="radio" name="people" checked> Student
   <input type="radio" name="people"> Teacher
   <input type="radio" name="people"> Assistant

   <!-- Here is the dynamic content, which could be check boxes or radio buttons-->
</form>

The feature I would like to implement is:

• Based on the selection of the radio buttons, the content after the radio buttons will change dynamically. (The radio buttons and the content are inside a form.)

For example:

1. If "student" is selected, the dynamic content part is (check boxes):

   <input type="checkbox" name="name" /> Name <br />
   <input type="checkbox" name="Age" /> Age <br />
   <input type="checkbox" name="grade" /> Grade <br />
   

2. If "Teacher" is selected, the dynamic content part is (check boxes开发者_开发问答 & radio buttons):

   <input type="checkbox" name="subject" /> Subject <br />
   
   <input type="radio" name="code" checked> 111
   <input type="radio" name="code"> 222
   <input type="radio" name="code"> 333
   

3. If "Assistant" is selected, the dynamic content part is other check boxes.

How to implement this dynamic content change in jQuery?

---

What I tried

I tried to create HTML elements dynamically in Javascript, but I feel it is not a good way since I have to write HTML elements in Javascript as strings.

---

Try this

Working demo

Markup change

<form ...>
   <input type="radio" name="people" value="student" checked> Student
   <input type="radio" name="people" value="teacher"> Teacher
   <input type="radio" name="people" value="assistant"> Assistant

   <div class="content student">
     <input type="checkbox" name="name" /> Name <br />
     <input type="checkbox" name="Age" /> Age <br />
    <input type="checkbox" name="grade" /> Grade <br />
   </div>

   <div class="content teacher" style="display:none;">
      Teacher content
   </div>

   <div class="content assistant" style="display:none;">
      Assistant content
   </div>
</form>

Js

$(function(){

   $("input[name=people]").click(function(){
      $("div.content").not("."+this.value).hide();
      $("."+this.value).show();
   });

});

---

put all three possible elements in your static html and wrap each part with a div. Then Show and hide the divs on click

---

If I understand your question correctly... I would create different divs that are hidden that contain the combinations that you are looking for. Then on the onclick of the radio button I would hide divs that you don't want shown and show the divs that you are looking for.