如何在我的情况下动态更改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. 如果选择" 学生 ",则动态内容部分为(复选框):

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

2. 如果选择" 教师 ",则动态内容部分为(复选框和单选按钮):

   <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. 如果选择" 助手 ",则动态内容部分是其他复选框.

如何在jQuery中实现这种动态内容更改？

---

我尝试了什么

我尝试在Javascript中动态创建HTML元素,但我觉得这不是一个好方法,因为我必须在Javascript中将HTML元素编写为字符串.

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>

JS

$(function(){

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

});