CODEWITHSUNDEEP
javascriptjquery
rikki ewan
rikki ewan

Reputation: 13

Show a div if check box is checked and vice-versa

I'm trying to find the value of a check box and then if it is checked it should show my div id as resizeable. If its not checked it should disappear. This is what I tried:

var showheader = document.getElementById("ckbx_header").checked;

if ( showheader == checked ) {
    $("#resizeable").toggle("slide", {}, 1000) );
  };

Upvotes: 0

Views: 2230

Answers (4)

Eric
Eric

Reputation: 97591

If you're really trying to do what you say you are, do this:

if($('#ckbx_header').prop('checked'))
    $("#resizeable").toggle("slide", 1000);

Otherwise, look at Felix Kling's answer

Upvotes: 2

Seldaek
Seldaek

Reputation: 42036

If you have jQuery, you should use it fully imo and do:

if ($("#ckbx_header:checked").length) {
    $("#resizeable").toggle("slide", {}, 1000) );
};

The :checked selector will only match if the element is a checked checkbox.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816452

You can bind an event handler to the change event:

$('#ckbx_header').change(function() {
     if(this.checked) {
         $("#resizeable").slideDown(1000);
     }
     else {
         $("#resizeable").slideUp(1000);
     }
});

In any case you need two actions: Show the div when the checkbox is selected and hide it if not. Currently you are toggling the visibility whenever the checkbox is selected, which is not what you want.

Upvotes: 2

TJHeuvel
TJHeuvel

Reputation: 12608

You dont need the extra check in the if, the checked value returns a boolean.

This would work:

var showheader = document.getElementById('test').checked;

if(showheader)
 $("#resizeable").toggle("slide",{},1000)

Upvotes: 0

Related Questions