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>

我想要实现的功能是：

根据单选按钮的选择，单选按钮后的内容将动态动态。（单选按钮和内容位于表单内。）

例如：

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

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

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

<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

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

如何在 jQuery 中实施动态内容更改？

我尝试了什么

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

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

});

Answer 2

将所有三个可能的元素放在静态html中，并用div包装每个部分。然后单击

显示和隐藏div

Answer 3

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

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

我尝试了什么

3 个答案: