Jquery checkbox to hide or display an element

Question

I want to use jquery to always hide an element when it is checked, and show the element when it is unchecked. After doing some research I found the "is" attribute and so I created a simple html file as:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script>
$(document).ready(function(){
if($("#s").is(':checked'))
    $("#test").hide();  // checked
else
    $("#test").show();
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p id="test">This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<input type="checkbox" id="s">Click me</input>

</body>
</html>

Now for some reason, the jquery is not functional. Any help would be appreciated please. I also tried:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

And this doesn't work either.

Possible duplicate of [Setting "checked" for a checkbox with jQuery?](http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) — Dan Philip Bejoy, Apr 19 '17 at 14:42

Muhammad Qasim · Answer 1 · 2017-04-19T14:44:11.567

This is simple in javascript. Please try the following:

var cb = document.getElementById('isAgeSelected');
var txtAge = document.getElementById('txtAge');

$(document).ready(function(){
    cb.change= function(){
       if(cb.checked) {
          txtAge.style.display ='block';
       } else {
          txtAge.style.display ='none';
       }
    };
});

In JQuery, you can do the following:

$(document).ready(function(){
   $('#s').on('change', function(){
      if($(this).is(":checked")){
         $('#txtAge').show();
      }
      else{
         $('#txtAge').hide();
      }
   });
});

score 1 · Answer 2 · answered Apr 19 '17 at 14:38

1

You can do this using following jQuery onchange event and .checked function

$(document).ready(function(){
    $('#s').change(function(){
        if(this.checked)
                $("#test").hide();  // checked
        else
            $("#test").show();
        });
});

Working URL:: https://jsfiddle.net/qn0ne1uz/

answered Apr 19 '17 at 14:38

Rana Ghosh

4,514
5
23
40

Yea, this works but could you explain why it doesn't work without the: $('#s').change(function(){ ? Thanks – Muhammad Apr 19 '17 at 14:45
@Muhammad Because what code you have written only works when document is ready then if checkbox is checked/unchecked No trigger will be fired. So for that you have to use `onchange`. – Rana Ghosh Apr 19 '17 at 14:49

score 1 · Answer 3 · answered Apr 19 '17 at 14:40

Good question !

now you were almost there.

$(document).ready(function(){ // <= !! you only evaluete the chackbox once (on document ready)
if($("#s").is(':checked'))
    $("#test").hide();  // checked
else
    $("#test").show();
});

What you want to do is monitor checkbox the whole time, like so:

$('#s').bind('change', function() {
  if ($("#s").is(':checked'))
    $("#test").hide(); // checked
  else
    $("#test").show();
});

example on jsfiddle

score 1 · Accepted Answer · answered Apr 19 '17 at 14:41

1

You are only checking the checkbox once after the DOM is ready instead you should do it on its change event

$("#s").change(function(){
  if($(this).is(':checked')) 
    $("#test").hide(); // checked
  else
    $("#test").show(); 
});

answered Apr 19 '17 at 14:41

Dan Philip Bejoy

4,321
1
18
33

score 1 · Answer 5 · answered Apr 19 '17 at 14:42

I'm guessing you are wanting to use the jQuery when the checkbox changes - at the moment you are just changing the hide / show it when the document loads.

Also ids need to be unique or jQuery will only get the first item with that id it comes to when you use the id selector. Change the test id to a class.

If you want the click me to change the state of the checkbox, turn it into a label (think you had it as a button) and target the input (using either for="input-id or wrap the label around the input and the text)

Try the following:

// this is to go in your document ready

$('#s').on('change', function() {  // bind to the change event of the chackbox
   // inside any change event, this is the js object of the thing that changed (ie the checkbox)
   if (this.checked) {
     $('.test').hide();
   } else {
     $('.test').show();
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>This is a heading</h2>
<!-- ids need to be unique so change this to a class or your jquery won't work -->
<p class="test">This is a paragraph.</p>
<p class="test">This is another paragraph.</p>

 <input type="checkbox" id="s"><label for="s">Click me</label>

Jquery checkbox to hide or display an element

5 Answers5