JavaScript/HTML非表示のフォーム要素が正しく表示されない

Question

入力フィールドを持つ基本フォームを作成しています。フィールドの1つにチェックボックスが使用されています。これをチェックすると、以下の2つの入力フィールドがフォームに表示され、前のフィールドと同じになります（チェックボックスの後の行から始まります）。

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。

私はフォームに、前のものと同じになっている2つの入力フィールドをさらに表示したいと考えています。だから、あなただけのcheckboxフィールドの前hidden_fieldsの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> 

・ホープ、このことができます。