在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");
}
});
});任何想法的建议都将受到高度赞赏。
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-03-24 14:56:39
您不需要对这么多元素应用class="hidden"。Here是工作代码的一把小提琴。
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" class="hidden">
<label>Name:</label>
<input type="text" />
<br />
<label>Email:</label>
<input type="text" />
<br />
<label>Date of birth:</label>
<input type="text" />
</div>
<div id="radio_form" class="hidden">
<input type="radio" name="sex" value="male" />
<label>Male</label>
<input type="radio" name="sex" value="female" />
<label>Female</label>
</div>
</fieldset>
</form>jQuery
$(document).ready(function () {
/*Getting the value of the checked radio buttons*/
$("input.modeClass").on( 'click', function () {
var value = $(this).val();
if (value == "Text box") {
$("#text_form").show();
$("#radio_form").hide();
}
if (value == "Radio buttons") {
$("#text_form").hide();
$("#radio_form").show();
}
});
});Stack Overflow用户
发布于 2013-03-24 15:00:56
你应该试试这个
http://jsfiddle.net/pramodsankar007/u9RZy/
<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" class="hidden">
<label>Name:</label>
<input type="text">
<br>
<label>Email:</label>
<input type="text">
<br>
<label>Date of birth:</label>
<input type="text">
</div>
<div id="radio_form" class="hidden">
<input type="radio" name="sex" value="male">
<label>Male</label>
<input type="radio" name="sex" value="female">
<label>Female</label>
</form>
</fieldset>
</form>
$("input:radio[class=modeClass]").click(function () {
var value = $(this).val();
if (value == "Text box") {
$("#radio_form").show();
$("#text_form").hide();
/* console.log("Time to call input box");*/
}
if (value == "Radio buttons") {
$("#radio_form").hide();
$("#text_form").show();
}
});Stack Overflow用户
发布于 2013-03-24 15:06:41
你的jquery看起来还不错，但是你还需要一点额外的东西：
$(document).ready(function(){
$("input:radio[class=modeClass]").click(function() {
var value = $(this).val();
if(value=="Text box"){
$("#text_form").show().siblings("#radio_form").hide();
}
if(value=="Radio buttons"){
$("#radio_form").show().siblings("#text_form").hide();
}
});
});FIDDLE HERE
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15595905
复制相关文章
相似问题
腾讯云开发者
