单击复选框时隐藏元素

Hide element when click on checkbox

本文关键字：元素 隐藏 复选框 单击      更新时间：2023-09-26

当复选框被点击时，我试图隐藏元素。

不知道为什么它不工作-

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

怎么了?

谢谢!

既然你使用的是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>

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

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)

既然你正在使用jQuery，切换是一种方式，在这里我测试检查:

$(function(){
  $("#toggleP").on("click",function() {
    $("#hidethis").toggle(!this.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();
});

请查看。我希望这对你有帮助。

$('#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';
		}
	};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	
	<input id="sample" type="checkbox">
<p id="hidethis">
hide me
</p>

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

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

你可以在控制台看到这个问题，你按下f12发布的jsfiddle。

这是一个可以工作的修改后的JSFiddle。

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

相关文章：