Hide element when click on checkbox

Question

I'm trying to hide element when the checkbox is clicked.

Somehow it didn't work -

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/

What's wrong?

Thanks!

see comment below. BTW - why the $ sign is problem? because it waits for parameter and didnt get one? — John Js
– John Js, Commented Nov 3, 2016 at 9:28
Because that is used by jQuery. Now you have redefined it as = undefined, so no longer represents the jQuery library — K Scandrett
– K Scandrett, Commented Nov 3, 2016 at 9:31

Zakaria Acharki · Accepted Answer · 2016-11-03 09:26:24Z

4

Since you're using jquery just use toggle() :

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

Hope this helps.

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>

answered Nov 3, 2016 at 9:26

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zakaria Acharki Over a year ago

No @JohnJs you should use jquery object $('#hidethis') instead of js object document.getElementById( "hidethis" ) so you could use the jQuery function toggle(), else you'll get .toggle is not a function error..

jogoe Over a year ago

can't use .toggle in javascript :)

jogoe · Accepted Answer · 2016-11-03 09:31:32Z

2

remove the $ in your function parameters and the problem will be fixed :)

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

could also do it like this:

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

(have to add id to checkbox tho)

edited Nov 3, 2016 at 9:31

answered Nov 3, 2016 at 9:25

jogoe

3347 silver badges18 bronze badges

Comments

mplungjan · Accepted Answer · 2016-11-03 10:59:31Z

1

Since you are using jQuery, toggle is the way to go, Here I am testing the checked:

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

If you want to look at the state when loading the page:

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

edited Nov 3, 2016 at 10:59

answered Nov 3, 2016 at 9:30

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

Chetan · Accepted Answer · 2016-11-03 09:30:04Z

0

Please check this out. I hope it will help

$('#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>

answered Nov 3, 2016 at 9:30

Chetan

9425 silver badges22 bronze badges

Comments

Alex Wells · Accepted Answer · 2016-11-03 09:31:04Z

0

Using $(this).toggle() is risky as you can guarentee the initial state of checkbox which may cause the checkbox not work as intended.

The actually problem with your code is the $ in the function variable.

You can see this is the issue by looking in the console on the jsfiddle you posted by pressing f12.

Here is a revised JSFiddle that will work.

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

answered Nov 3, 2016 at 9:31

Alex Wells

1051 silver badge9 bronze badges

1 Comment

mplungjan Over a year ago

You can test the state too

Collectives™ on Stack Overflow

Hide element when click on checkbox

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related