在复选框上显示div剔

Question

我知道这个问题已被问及我尝试了几种不同的方法，但似乎无法得到这个工作。我试图插入一个div来扩展基于勾选的复选框的形式。目前似乎没有任何工作。这也可能是一些愚蠢的事，我会很感激的帮助：

https://jsfiddle.net/4ydybrdd/#&togetherjs=qG3ypyIQsa

HTML：

<form method="post" autocomplete="off"> 
       <div class="row resetpword"> 
        <div class="container-fluid addblog"style="margin- 
    top:-40px;margin-bottom:20px;"><h2>Registration</h2></div> 
        <div class="container-fluid" style="margin-left:37px;"> 
         <label> 
          First Name<span class="req">*</span> 
         </label> 
         <input type="text" required autocomplete="off" 
    name="firstname" /> 
        </div> 
        <div class="container-fluid" style="margin-left:35px;"> 
         <label> 
          Last Name<span class="req">*</span> 
         </label> 
         <input type="text" required autocomplete="off" 
    name="lastname" /> 
        </div> 
       </div> 
       <div class="row resetpword" style="margin-top:0;"> 
        <div class="container-fluid" style="margin-left:10px;"> 
         <label> 
          Email Address<span class="req">*</span> 
         </label> 
         <input type="email" required autocomplete="off" 
    name="email" /> 
        </div> 
       </div> 
       <div class="row resetpword" style="margin-top:0;"> 
        <div class="container-fluid"> 
         <label> 
          Set A Password<span class="req">*</span> 
         </label> 
         <input type="password"required autocomplete="off" 
    name="password"/> 
        </div> 
       </div> 
       <div class="container-fluid resetpword countrydropdown" 
    style="margin-top:0;margin-left:-15px;"> 
        <label> 
         Country of origin<span class="req">*</span> 
        </label> 
        <select> 
         <option value="AF">Afghanistan</option> 
         <option value="AX">Åland Islands</option> 
        </select> 
       </div> 
       <div class="container-fluid resetpword" style="margin-top:0;"> 
        <label> 
         Are you a blogger?<span class="req">*</span> 
        </label> 
        <input type="checkbox" name="check1" id="blogger"/> 
       </div> 
       <div class="addblog"><p>sausage</p></div> 
       <button type="submit" class="resetb button button-block" 
    name="register">Register</button> 
    </form> 

JS：

jQuery("#blogger").click(function() { 
if($(this).is(":checked")) { 
    jQuery(".addblog").show(300); 
} 
else { 
    jQuery(".addblog").hide(300);; 
} 
}); 

Answer 1

后document.ready后的JS代码，不要忘了添加jquery链接

Updated fiddle

/*! 
 
* can yo u solve my issue? :) I don't understand why it won't wor 
 
*/ 
 
$(document).ready(function(){ 
 
jQuery("#blogger").change(function() { 
 
    if($(this).is(":checked")) { 
 
     jQuery(".addblog").show(300); 
 
    } 
 
\t else { 
 
     jQuery(".addblog").hide(300);; 
 
    } 
 
}); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" autocomplete="off"> 
 
\t \t \t \t <div class="row resetpword"> 
 
\t \t \t \t \t <div class="container-fluid addblog"style="margin-top:-40px;margin-bottom:20px;"><h2>Registration</h2></div> 
 
\t \t \t \t \t <div class="container-fluid" style="margin-left:37px;"> 
 
\t \t \t \t \t \t <label> 
 
\t \t \t \t \t \t \t First Name<span class="req">*</span> 
 
\t \t \t \t \t \t </label> 
 
\t \t \t \t \t \t <input type="text" required autocomplete="off" name="firstname" /> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="container-fluid" style="margin-left:35px;"> 
 
\t \t \t \t \t \t <label> 
 
\t \t \t \t \t \t \t Last Name<span class="req">*</span> 
 
\t \t \t \t \t \t </label> 
 
\t \t \t \t \t \t <input type="text" required autocomplete="off" name="lastname" /> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row resetpword" style="margin-top:0;"> 
 
\t \t \t \t \t <div class="container-fluid" style="margin-left:10px;"> 
 
\t \t \t \t \t \t <label> 
 
\t \t \t \t \t \t \t Email Address<span class="req">*</span> 
 
\t \t \t \t \t \t </label> 
 
\t \t \t \t \t \t <input type="email" required autocomplete="off" name="email" /> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row resetpword" style="margin-top:0;"> 
 
\t \t \t \t \t <div class="container-fluid"> 
 
\t \t \t \t \t \t <label> 
 
\t \t \t \t \t \t \t Set A Password<span class="req">*</span> 
 
\t \t \t \t \t \t </label> 
 
\t \t \t \t \t \t <input type="password"required autocomplete="off" name="password"/> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="container-fluid resetpword countrydropdown" style="margin-top:0;margin-left:-15px;"> 
 
\t \t \t \t \t <label> 
 
\t \t \t \t \t \t Country of origin<span class="req">*</span> 
 
\t \t \t \t \t </label> 
 
\t \t \t \t \t <select> 
 
\t \t \t \t \t \t <option value="AF">Afghanistan</option> 
 
\t \t \t \t \t \t <option value="AX">Åland Islands</option> 
 
\t \t \t \t \t </select> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="container-fluid resetpword" style="margin-top:0;"> 
 
\t \t \t \t \t <label> 
 
\t \t \t \t \t \t Are you a blogger?<span class="req">*</span> 
 
\t \t \t \t \t </label> 
 
\t \t \t \t \t <input type="checkbox" name="check1" id="blogger"/> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="addblog"><p>sausage</p></div> 
 
\t \t \t \t <button type="submit" class="resetb button button-block" name="register">Register</button> 
 
</form>

Answer 2

看你的例子看来你失踪了jQuery库以及一些HTML改变

Answer 3

你们两个divs.so具有用户.addblog类的名称，当你点击复选框两个divs获取显示和hide.so删除任何一个类或使用不同的类名称为新的div插入..