在html表单中切换隐藏和显示
在html表单中切换隐藏和显示
提问于 2013-03-24 14:45:10
我想要显示和隐藏html表单的可见性。我有两种模式当模式1被选择时，表单应该与文本框一起显示，当模式2被选择时，带有单选按钮的表单应该显示，模式1应该被隐藏，最初一切都被隐藏。这就是我到目前为止所做的，但是我的带有jQuery的css不能应用。
HTML表单
<form>
<fieldset>
<legend>Lets switch</legend>
Mode 1
<input type="radio" class="modeClass" name="change_mode" value="Text box">
Mode 2
<input type="radio" class="modeClass" name="change_mode" value="Radio buttons"> <br>
<div id= "text_form">
<label class="hidden"> Name:</label> <input type="text" class ="hidden"><br>
<label class= "hidden"> Email:</label> <input type="text" class ="hidden"><br>
<label class= "hidden"> Date of birth:</label> <input type="text" class ="hidden">
</div>
<div id="radio_form">
<input type="radio" name="sex" class ="hidden" value="male"><label class="hidden">Male</label>
<input type="radio" name="sex" class="hidden" value="female"><label class= "hidden">Female</label>
</form>
</fieldset>
</form> CSS
<style>
.hidden
{
display:none;
}
</style>JQuery
$(document).ready(function(){
/*Getting the value of the checked radio buttons*/
$("input:radio[class=modeClass]").click(function() {
var value = $(this).val();
/* console.log(value);*/
if(value=="Text box")
{
$("#text_form").css("display","block");
/* console.log("Time to call input box");*/
}
if(value=="Radio buttons")
{
$("#radio_form").css("display","block");
}
});
});任何想法的建议都将受到高度赞赏。
Stack Overflow用户
发布于 2013-03-24 14:52:52
Jquery有隐藏和显示方法。
$("#text_form).hide();还有切换功能，如果你不知道当前是否显示，这会很有帮助。
http://api.jquery.com/hide/
http://api.jquery.com/toggle/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15595905
复制相关文章
相似问题
腾讯云开发者
