javascript - 单击后隐藏复选框

Question

我目前有一个复选框，一旦选中，就会出现一些 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>

非常感谢任何帮助。

Answer 1

可以引用this隐藏复选框

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

演示:Fiddle

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