Show div on checkbox tick

Question

I know this question has been asked and I've tried a few different methods but can't seem to get this to work. I'm trying to insert a div to extend a form based on a checkbox being ticked. Nothing seems to work at the moment. It's probably something stupid, I'd appreciate the assistance:

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

Post the js code after document.ready and don't forget to add jquery link

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

Answer 2

查看您的示例，看来您缺少jquery库以及一些html更改

Answer 3

您在两个div中有一个用户.addblog类名。因此，当您单击复选框时，两个div都会同时显示和隐藏。因此，删除任何一个类或为插入新的div使用不同的类名。