Question

我有一个复选框。我在复选框下面有一个包含内容的div。选中该复选框后，div将被隐藏。取消选中该复选框后，div就会显示。

加载页面时，我希望选中复选框并将div隐藏起来。取消选中该复选框后，div应该可见。

我尝试过使用点击功能，我尝试过使用show和hide。但我无法让代码完成我想要的。非常感谢任何帮助。

这是我的代码：

<script>
$(document).ready(function()
{
    $('#checkbox_content').change(function()
    {
        if(this.checked)
            $('#content').fadeOut('slow');
        else
            $('#content').fadeIn('slow');       
    });
});
</script>


<div>
    <form action="">
       <input type="checkbox" name="" value="" id="checkbox_content" checked="checked">
    </form>
</div>


<div id="content"> 
    div content here 
</div>

Answer 1

只需将display:none添加到您的div：

<div id="content" style="display:none;"> 
    div content here 
</div>

DEMO

默认情况下，div将被隐藏，其余代码将完成您想要的操作而不做任何更改。

Answer 2

这是您查询的小提琴。

https://jsfiddle.net/swaprks/L8eyrmjs/

JAVASCRIPT：

$(document).ready(function()
{
    $('#checkbox_content').change(function()
    {
        if(this.checked)
            $('#content').fadeOut('slow');
        else
            $('#content').fadeIn('slow');       
    });
});

HTML：

<div>
    <form action="">
       <input type="checkbox" name="" value="" id="checkbox_content" checked="checked">
    </form>
</div>


<div id="content" class="displayNone"> 
    div content here 
</div>

CSS：

.displayNone{display:none;}

希望这会有所帮助。基本上你只需要在开始时隐藏div，因为你使用“checked”属性选中复选框。提示：最好将CSS保存在单独的css文件中，而不是将其写入内联。

Answer 3

您也可以这样做，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<form action="">
  <input type="checkbox" name="" value="" id="checkbox_content" checked="checked" onChange="$('#content').fadeToggle('slow');">
</form>
<div id="content" style="display:none">
  div content here
</div>

看来你正在使用jQuery。

如何在页面加载时选中复选框并隐藏div？

3 个答案: