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.