Javascript 单击后隐藏复选框

我目前有一个复选框，一旦选中，就会出现一些div元素。我想在单击复选框后隐藏它，以便只显示div元素

这是我的HTML：

<div>
<label>Check the box to agree to our terms. After agreeing, you will be able to view our products and checkout.<input name="colorCheckbox" type="checkbox" value="red" /></label>
</div>
<div class="red box">content shows up here</div>

勾选此框以同意我们的条款。同意后，您将能够查看我们的产品并结帐。
内容显示在这里

以下是我的Javascript：

<script type="text/javascript">
    $(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).attr("value")=="red"){
                $(".red").toggle();
            }
        });
    });
</script>

$（文档）.ready（函数（）{
$（'input[type=“checkbox”]”）。单击（函数（）{
如果（$（此）.attr（“值”）=“红色”）{
$（“.red”）.toggle（）；
}
});
});

---

非常感谢您的帮助。

您可以通过参考

此

$(document).ready(function () {
    $('input[type="checkbox"][value="red"]').click(function () {
        $(".red").show();
        $(this).hide()
    });
});

演示：

---

还请注意，更改处理程序仅添加到值为红色的复选框中，而不是针对所有复选框

$（函数（）{
$（'input[name=“colorCheckbox”]”）。在（“单击”上，函数（）{
$（“+this.value）.toggle（this.checked）；
$（this.toggle）（！this.checked）；
}).triggerHandler（“单击”）；//初始化
});

勾选此框以同意我们的条款。同意后，您将能够查看我们的产品并结帐。
此处显示内容
为什么不单击？有些浏览器需要模糊才能触发change@mplungjan点击没有什么错-谢谢。也有办法隐藏标签吗？谢谢。我感谢你的帮助