JavaScript/HTML隐藏的表单元素显示不正确
问题描述:
我正在创建一个带有输入字段的基本表单。其中一个字段使用复选框。选中时,我希望表单在下面再显示两个输入字段,并与之前的字段对齐(从复选框后面的行开始)。现在,我的代码是有隐藏字段显示在该行的末尾,而不是下一个:JavaScript/HTML隐藏的表单元素显示不正确
HTML:
<form id="demo-form2" data-parsley-validate class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Outgoing SMTP Server
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="outgoing_sever" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Port
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="port" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Enable Authentication
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="checkbox" id="enable_auth" name="question">Enable SMTP Authentication
</div>
<div id="hidden_fields">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">SMTP Server Login
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="server_login" name="hidden" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">SMTP Server Passowrd
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="server_password" name="hidden" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button type="submit" class="btn btn-success">Update</button>
<button class="btn btn-primary">Reset</button>
</div>
</div>
</form>
的Javascript:
$(function() {
var checkbox = $("#enable_auth");
var hidden = $("#hidden_fields");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
hidden.show();
} else {
hidden.hide();
}
});
});
有谁知道这是什么原因造成的?谢谢!
答
我希望窗体在下面再显示两个输入字段,与之前的对齐。所以,你必须把hidden_fields
DIV之前checkbox
场,所以重新排序的div像:
<form id="demo-form2" data-parsley-validate class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Outgoing SMTP Server
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="outgoing_sever" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Port
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="port" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div id="hidden_fields">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">SMTP Server Login
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="server_login" name="hidden" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">SMTP Server Passowrd
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="server_password" name="hidden" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Enable Authentication
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="checkbox" id="enable_auth" name="question">Enable SMTP Authentication
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button type="submit" class="btn btn-success">Update</button>
<button class="btn btn-primary">Reset</button>
</div>
</div>
</form>
希望这有助于。
标题,它有点矛盾吗? – Teemu
我刚刚意识到:-P意思是“不能正确切换” –