Как динамически изменить элементы HTML в моем случае?

Question

На моей странице есть группа переключателей:

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

Функция, которую я хотел бы реализовать:

• В зависимости от выбора переключателей содержимое после переключателей будет динамически менять . (Переключатели и содержимое находятся внутри формы.)

Например:

1. Если выбран « student », часть с динамическим содержимым (флажки):

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

2. Если выбран « Teacher », динамическая часть контента (флажки и переключатели):

   <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. Если выбран « Assistant », динамическая часть содержимого - это другие флажки.

Как реализовать это динамическое изменение содержимого в jQuery ?

---

Что я пробовал

Я пытался динамически создавать HTML-элементы в Javascript, но чувствую, что это не очень хороший способ, поскольку мне приходится писать HTML-элементы в Javascript в виде строк.

Answer 1

Попробуйте это

Рабочая демо

Изменение разметки

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

Дж

$(function(){

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

});

Answer 2

Если я правильно понимаю ваш вопрос ... Я бы создал разные скрытые div, содержащие комбинации, которые вы ищете.Затем по щелчку переключателя я скрыл бы div, которые вы не хотите показывать, и показал бы div, которые вы ищете.

Answer 3

поместите все три возможных элемента в ваш статический html и оберните каждую часть div.Затем покажите и скройте div-ы при нажатии