Javascript 在复选框勾选时显示div

我知道有人问过我这个问题，我也尝试过一些不同的方法，但似乎都没能奏效。我正在尝试插入一个div，以根据选中的复选框扩展表单。目前似乎什么都不管用。可能是一些愚蠢的事情，我会感谢你的帮助：

html:

---

在

document.ready

之后发布js代码，不要忘记添加jquery链接

/*！
*你能解决我的问题吗？：）我不明白为什么它不起作用
*/
$（文档）.ready（函数（）{
jQuery（“#blogger”）.change（函数（）{
如果（$（this）.is（“：checked”））{
jQuery（“.addblog”）.show（300）；
}
否则{
jQuery（“.addblog”）.hide（300）；；
}
});
})

登记处
名字*
姓*
电子邮件地址*
设置密码*
原籍国*
阿富汗
奥兰群岛
你是博主吗*
香肠

登记

在

文档之后发布js代码。准备好了

，别忘了添加jquery链接

/*！
*你能解决我的问题吗？：）我不明白为什么它不起作用
*/
$（文档）.ready（函数（）{
jQuery（“#blogger”）.change（函数（）{
如果（$（this）.is（“：checked”））{
jQuery（“.addblog”）.show（300）；
}
否则{
jQuery（“.addblog”）.hide（300）；；
}
});
})

登记处
名字*
姓*
电子邮件地址*
设置密码*
原籍国*
阿富汗
奥兰群岛
你是博主吗*
香肠

登记

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

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

您有两个div中的user

.addblog

类名。因此，当您单击复选框时，两个div都会显示和显示hide.so删除任何一个类或为要插入的新div使用不同的类名。

您有两个div中的user

.addblog

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

您为我正在尝试插入一个div以扩展基于勾选复选框的表单您为我所做的是尝试插入一个div来扩展基于勾选复选框的表单

    <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>

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