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) )开发者_Go百科;
  };

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.

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

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)

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.