javascript - 单击复选框时隐藏元素

Question

我试图在单击复选框时隐藏元素。

不知何故它没有工作-

html

<input type="checkbox"  onchange="showAtidit()">
<p id="hidethis">
hide me
</p>

js

function showAtidit($)
{
    if ($(this).is(':checked')) 
    {
        alert("not hide");
        document.getElementById( "hidethis" ).style.display = 'block';
    }
    else
    {
        alert("hide");
        document.getElementById( "hidethis" ).style.display = 'none';
    }
};

http://jsfiddle.net/wv97mpcp/108/

怎么了？

谢谢!

Answer 1

因为您使用的是 jquery，只需使用 toggle() :

function showAtidit()
{
   $('#hidethis').toggle();
}

希望这对您有所帮助。

function showAtidit()
{
  $('#hidethis').toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox"  onchange="showAtidit()">
<p id="hidethis">
hide me
</p>