在我的例子中如何动态更改 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. 如果选择“学生”，则动态内容部分为（复选框）：

   姓名 
   >
   <输入类型=“复选框”名称=“年龄”/>年龄 
   >
   <输入类型=“复选框”名称=“等级”/>等级
   
   

2. 如果选择“教师”，则动态内容部分为（复选框）：

   如果选择“教师”，则动态内容部分是（复选框和单选按钮）：

   主题 
   >
   
   <输入类型=“无线电”名称=“代码”已选中> 111
   <输入类型=“无线电”名称=“代码”> 222
   <输入类型=“无线电”名称=“代码”>第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();
   });

});

Answer 2

将所有三个可能的元素放入静态 html 中，并用 div 包裹每个部分。然后单击时显示和隐藏 div

Answer 3

如果我正确理解你的问题...我会创建隐藏的不同 div，其中包含你正在寻找的组合。然后，在单击单选按钮时，我将隐藏您不想显示的 div 并显示您正在查找的 div。