Question

我正在创建一个带输入字段的基本表单。其中一个字段使用复选框。选中后，我希望表单在下面显示另外两个输入字段，与之前的字段对齐（从复选框后面的行开始）。现在，我的代码将隐藏字段显示在该行的末尾，而不是下一行：

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

有谁知道造成这种情况的原因是什么？谢谢！

Answer 1

<强> Working Fiddle

我希望该表单在下面显示另外两个输入字段，与之前的对齐。所以你必须在hidden_fields字段之前放置checkbox div，所以重新排序你的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>

希望这有帮助。

JavaScript / HTML隐藏的表单元素无法正常显示

1 个答案: