Question

I need to make a div visible when a checkbox is clicked using jQuery/Java. The “checked” is coming from the database, so I also need to a check to see if the checkbox is already checked on page load.

This is what I have currently:

<input type="checkbox" name="foo" value="1" onclick="$(this).is(':checked') && $('#checked-a').slideDown('slow') || $('#checked-a').slideUp('slow');"/>

<div class="dis-sub" style="display: none;" id="checked-a">
    ...
</div>

The code works as-is to show/hide a div. I need a solution that checks on page load to see if the checkbox is already checked (dynamically in this case, by PHP from a database).

Thanks in advance.

Answer 1

I would like to take away the onclick javascript call from your HTML markup and put in your script file. that makes the code much cleaner.

This will change the visibility when you check the checkbox.( Assuming the checkbox has an id “foo” )

$("#foo").change(function(){

   var ischecked=$(this).is(':checked'); 
    if(ischecked)
    {
         $("#checked-a").fadeIn(200);
    }
    else
    {
        $("#checked-a").fadeOut(200);   
     }

});

If you want to check the value from database and change the visibility, you can set your checked property value in your html (using your PHP variable value which you got from the database) and then check the value of your checkboxe’s checked property and change the visibilty

HTML

   <input type="checkbox" id="foo" value="1" checked="checked"/>
<div style="display:none;" id="checked-a">
    Some content
</div>

Javascript

 $(function(){

    var ischecked=$("#foo").is(':checked'); 
   if(ischecked)
   {
       $("#checked-a").fadeIn(200);
   } 
    else
    {
        $("#checked-a").fadeOut(200);   
     }

});

Here is the sample : http://jsfiddle.net/Uj4QJ/9/