Showing Meta Box via Jquery Checkbox

Question

Ive been fooling around with both Jquery and PHP and Im trying to setup a website for a sports team. I've created a custom post type called "Matches" and in there I've created two Custom Meta Boxes. One for the match details (IE home and away team) and one for match stats (goals, shots etc.). What I currently have is a (Is This Game Complete) checkbox that shows/hides the statistics options (that are in a Div #meta_box_stats) in the Meta Box Details (#dw_match_details).

The checkbox data value is saving but it isn't functioning quite properly. If it's checked as complete upon loading to edit and the value is set to 'on' it still won't show the stats meta box when I try to edit the post, I have to click it off and then click it on again. Here is my code (as brief as possible cause theres a lot going on).

This is working, as I've done a var_dump on check and it changes accordingly to on or off and either shows the check or not.

I want the stats to be hidden initially until the gamescore is entered. Once entered and checked as complete it should always show when you edit the page...I just cant figure out why it isnt.

Here is My script

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $("#dw_match_stats").hide();
        $('#dw_match_details').on('change', '#dw_complete', function() {            
            played = $(this).prop('checked');
            if (played) {
                $('#dw_match_stats').show();
            } else {
                $('#dw_match_stats').hide();
            }
        });
        $('#dw_match_stats').change();
    });
</script> 

As mentioned the custom data value "dw_complete" is saving and changing properly.

EDIT: Here is some of the remaining code. I've essentially created two meta boxes, one called #dw_match_details which has the team selection and the checkbox on whether or not the game is complete.

<div id="dw_match_details" class="postbox ">
<div class="handlediv" title="Click to toggle"><br></div><h3 class="hndle"><span>Match Details</span></h3>
<div class="inside">

<?php 
$values = get_post_custom( $post->ID );
$check =  $values['dw_complete'][0];
?>

<input type="checkbox" id="dw_complete" name="dw_complete" <?php checked( $check, 'on', true ); ?> />  
<label for="dw_complete">Is This Game Complete?</label>

Then I have my stats metabox.

<div id="dw_match_display" class="postbox">
<div class="inside">
<div id="dw_game_stats" class="tabs-panel">
<div width="50%" style="float:left;margin-right:10%;">
<strong>Goals Per Period:</strong>  
    <table>
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>1st</th>
                <th>2nd</th>
                <th>3rd</th>
                <th>OT</th>
                <th>Total</th>
            </tr>
        </thead>
    </table>
</div>

That's the gist of it, I obviously have more information going on for the stats section but think it should be irrelevant. If you need me to post that I can or Ill put it in a PasteBin. Before I forget here are the two calls to create my meta boxes.

function dw_custom_meta_boxes_match() {
add_meta_box( 'dw_match_details', 'Match Details', 'dw_match_details', 'dw_match', 'normal', 'high' );
add_meta_box('dw_match_display', 'Match Statistics', 'dw_match_display', 'dw_match', 'normal', 'low' );

Answer 1

Found a solution to it though, pretty simple

<script type="text/javascript">

jQuery(document).ready(function($) {
    var dw_match_display = $('#dw_match_display');
    dw_match_display.hide();
    if ($('#dw_complete').prop('checked') ) {
        dw_match_display.show();
    }

    $( '#dw_match_details' ).on( 'change', '#dw_complete', function() {
        dw_match_display.hide();
            if ( $(this).prop('checked') ) {
                dw_match_display.show();
            } 
        });
    });
jQuery(document).ready(function($) {
    $( '#dw_match_display' ).change();
});

</script>

Answer 2

I simplified your code by removing the WordPress stuff and removing some of your markup. I found it still didn't run the change event until I did it this way:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
    <head profile="http://gmpg.org/xfn/11">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Testing jQuery</title>
        <script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {

                $( '#dw_match_display' ).on( 'change', '#dw_complete', function() {

                    $( '#dw_match_details' ).hide();

                    // These 2 lines should be removed in production.
                    var change_status = $(this).prop('checked') ? 'shown' : 'hidden';
                    alert( "In Change Event\n\n Match Display will be " + change_status + '.' );

                    if ( $(this).prop('checked') ) {
                        $( '#dw_match_details' ).show();
                    }
                });
            });

            jQuery(document).ready(function($) {
                $( '#dw_complete' ).change();
            });

        </script>
    </head>
    <body>
        <div id="dw_match_display" class="postbox ">

            <input type="checkbox" id="dw_complete" name="dw_complete" checked="checked" />
            <label for="dw_complete"> Show Match Details</label>

            <div id="dw_match_details" class="postbox">
                [This data should be seen when the page loads.]
            </div><!-- end #dw_match_details -->

        </div><!-- end #dw_match_display -->
    </body>
</html>

I added an alert box so you could see that the change event runs when the page loads. I don't know why the second call to jQuery(document).ready works. I only tried it on a lark. :)

This tests the page when the check box is checked. To check the page when the box is not checked change this line:

<input type="checkbox" id="dw_complete" name="dw_complete" checked="checked" />

To this:

<input type="checkbox" id="dw_complete" name="dw_complete" />

So, try changing your jQuery code to this:

jQuery(document).ready(function($) {
    $('#dw_match_details').on('change', '#dw_complete', function() {
        played = $(this).prop('checked');
        if (played) {
            $('#dw_match_stats').show();
        } else {
            $('#dw_match_stats').hide();
        }
    });
});

jQuery(document).ready(function($) {
    $('#dw_match_stats').change();
});