Looking for jQuery script to swap div contents depending on checkbox checked/unchecked

I'm looking for a quick script to change a div when a checkbox is checked.

For example: Check the checkbox and "div1" appears. Uncheck the checkbox and "div2" appears.

Visual example: http://www.mmo-champion.com/ Take a look at there "Recent Forum Posts" box. I'm开发者_如何学C looking for something exactly like that.

Thanks!

You could try:

$('#checkboxID').click(
    function(){
        $('#div1, #div2').toggle();
    });

JS Fiddle demo

This assumes that the div1 is hidden, and div2 is shown, on page-load and the first click will check the checkbox and therefore show the divs.

References:

• click().
• toggle().

Please see the code below:

$("#cbox").click(function() {
   if ( $(this).is(':checked') )
   {
     $("#div1").show();
     $("#div2").hide();
   }
   else
   {
     $("#div1").hide();
     $("#div2").show();
   }    
});