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);
    }
	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都显示show和hide.so删除任何一个类或使用不同的类名来插入新的div .. / p>

在复选框刻度上显示div

3 个答案: