CODEWITHSUNDEEP
javascriptjqueryhtml
Muhammad
Muhammad

Reputation: 634

Jquery checkbox to hide or display an element

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.

Upvotes: 0

Views: 2633

Answers (5)

Muhammad Qasim
Muhammad Qasim

Reputation: 1722

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();
      }
   });
});

Upvotes: 2

Pete
Pete

Reputation: 58462

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>

Upvotes: 1

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4376

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(); 
});

Upvotes: 2

VikingCode
VikingCode

Reputation: 1052

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

Upvotes: 1

Rana Ghosh
Rana Ghosh

Reputation: 4674

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/

Upvotes: 1

Related Questions