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>

Answer 2

删除函数参数中的$，问题将得到解决：）

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

也可以这样做：

function showAtidit()
    {
        if(document.getElementById('checkbox').checked) {
          $("#hidethis").hide();
        } 
        else {
          $("#hidethis").show();
        }
    };

（必须在复选框中添加id）

Answer 3

由于你使用的是jQuery，切换是要走的路，在这里我测试了checked：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="toggleP">
<p id="hidethis">
hide me
</p>

$(function(){
  $("#toggleP").on("change",function() {
    $("#hidethis").toggle(!this.checked);
  }).change();
});

如果您想在加载页面时查看状态：

{{1}}

Answer 4

请检查一下。我希望它会有所帮助

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script>
<svg height="250" width="500" id="canvas">


</svg>

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

Answer 5

使用$(this).toggle()是有风险的，因为您可以保证复选框的初始状态，这可能导致复选框无法正常工作。

代码的实际问题是函数变量中的$。

你可以通过按f12查看你发布的jsfiddle上的控制台来看到这个问题。

这是一个可以使用的修订后的JSFiddle。

http://jsfiddle.net/wv97mpcp/112/

单击复选框时隐藏元素

5 个答案: