How to change the HTML elements dynamically in my case?
I have a group of radio buttons on my page:
<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>
The feature I would like to implement is:
- Based on the selection of the radio buttons, the content after the radio buttons will change dynamically. (The radio buttons and the content are inside a form.)
For example:
If "student" is selected, the dynamic content part is (check boxes):
<input type="checkbox" name="name" /> Name <br /> <input type="checkbox" name="Age" /> Age <br /> <input type="checkbox" name="grade" /> Grade <br />
If "Teacher" is selected, the dynamic content part is (check boxes开发者_开发问答 & radio buttons):
<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
If "Assistant" is selected, the dynamic content part is other check boxes.
How to implement this dynamic content change in jQuery?
What I tried
I tried to create HTML elements dynamically in Javascript, but I feel it is not a good way since I have to write HTML elements in Javascript as strings.
Try this
Working demo
Markup change
<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();
});
});
put all three possible elements in your static html and wrap each part with a div. Then Show and hide the divs on click
If I understand your question correctly... I would create different divs that are hidden that contain the combinations that you are looking for. Then on the onclick of the radio button I would hide divs that you don't want shown and show the divs that you are looking for.
精彩评论