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

Posted 2023-03-05

【中文标题】在我的情况下如何动态更改 HTML 元素？

【英文标题】：How to change the HTML elements dynamically in my case?

【发布时间】：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 编写为字符串

【参考方案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>

Js

$(function()

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

);

【讨论】：

@Leem - 你看过这个吗？

【参考方案2】：

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

【参考方案3】：

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