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

【问题标题】：How to make a checkbox be checked and div hidden when page loads?如何在页面加载时选中复选框并隐藏 div？
【发布时间】：2016-03-16 11:23:30
【问题描述】：

我有一个复选框。我在复选框下有一个包含内容的 div。当复选框被选中时，div 被隐藏。当复选框未选中时，div 可见。

加载页面时，我希望选中复选框并隐藏 div。当复选框未选中时，div 应该是可见的。

我尝试过使用点击功能，也尝试过使用显示和隐藏。但我无法得到代码来做我想做的事。非常感谢任何帮助。

这是我的代码：

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

【问题讨论】：

标签： javascript checkbox

【解决方案1】：

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

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

DEMO

现在默认情况下隐藏 div，其余代码将按照您的意愿进行操作，无需任何更改。

【讨论】：

【解决方案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 文件中，而不是内联编写。

【讨论】：

【解决方案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。

【讨论】：