在我的情况下如何动态更改 HTML 元素？答案

【问题标题】：How to change the HTML elements dynamically in my case?在我的情况下如何动态更改 HTML 元素？
【发布时间】：2011-10-30 15:16:57
【问题描述】：

我的页面上有一组单选按钮：

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

我想实现的功能是：

根据单选按钮的选择，单选按钮后面的内容会动态地改变。（单选按钮和内容在表单中。）

例如：

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

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

如果选择了“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

如果选择“Assistant”，则动态内容部分为其他复选框。

如何在jQuery中实现这个动态内容变化？

我尝试了什么

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

【问题讨论】：

您可以使用 CSS 显示和隐藏各种元素。到目前为止，您尝试过什么？
我尝试在 Javascript 中动态创建 HTML 元素，但我觉得这不是一个好方法，因为我必须在 Javascript 中将 HTML 编写为字符串

标签： javascript jquery html jquery-selectors jquery-validate

【解决方案1】：

试试这个

工作demo

标记更改

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

});

【讨论】：

@Leem - 你看过这个吗？

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：