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

I have a checkbox. I have a div with content under the checkbox. When the checkbox is checked, the div is hidden. When the checkbox is unchecked, the div is visible.

我有一个复选框。我在复选框下面有一个包含内容的div。选中该复选框后,div将被隐藏。取消选中该复选框后,div将可见。

When the page is loaded, I want the checkbox to be checked and the div to already be hidden. When the checkbox is unchecked, the div should be visible.

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

I have tried using the click function, and I’ve tried using show and hide. But I can’t get the code to do what I want. Any help is greatly appreciated.

我尝试过使用点击功能,我尝试过使用show和hide。但我无法让代码完成我想要的。任何帮助是极大的赞赏。

Here's my code:

这是我的代码:

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

3 个解决方案

#1

Just add display:none to your div:

只需在div中添加display:none:

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

DEMO

The div will now be hidden by default, the rest of your code will do what you want without any change.

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

#2

Here is the fiddle to your query.

这是您的查询的小提琴。

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

Hope this helps. Basically you just need to hide the div at the start as you are making the checkbox as checked using the property "checked". Tip: It is better to maintain CSS in a separate css file rather than writing it inline.

希望这可以帮助。基本上,您只需要在开始时隐藏div,因为您使用“已检查”属性选中复选框。提示:最好将CSS保存在单独的css文件中,而不是将其写入内联。

#3

You can also do like this,

你也可以这样做,

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

It seems you are using jQuery.

看来你正在使用jQuery。

#1