Toggle Register member check box

Question

Upon checkout I would like to show the register member check box.

When the user clicks it I wish for a div to appear with the user name and password field.

I have working javascript, but when I insert it into the Store:Cart tag it does not work. Any ideas on getting this to work or an easier method?

    function register_member(checkboxName,toggleLyr) {

        var lyr = document.getElementById(toggleLyr);
        var checkbox = document.getElementById(checkboxName);

        if (checkbox.checked == true) {
            lyr.style.display = 'block';
        }
        else {
            lyr.style.display = 'none';
        }
    }

</script>

Register Member Account?

    <div id="register_member" style="display:none;">

Password {field:password}

Confirm Password {field:password_confirm}

Username {field:username}

Screen Name {field:screen_name}

    </div></code> 

Answer 1

We've done it like this:

{if logged_out}
    <fieldset id="create-account">
      <legend>Create your account</legend>

      <div class="control-group">
            <div class="controls">
                <label for="register_member" class="checkbox">
                    {field:register_member}  Register Member Account
                </label>
            </div>
        </div>

    <!-- These fields are optional -->
    <div id="register_member_draw" style="display: none;">

      <div class="control-group">
        <label class="control-label" for="password">Password</label>
        <div class="controls">
          {field:password} {error:password}
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="password_confirm">Confirm Password</label>
        <div class="controls">
          {field:password_confirm} {error:password_confirm}
        </div>
      </div>
    </div>

    </fieldset>
{/if}

Then the JS:

$(function() {
    $('#register_member').change(function() {
        if (this.checked) {
            $('#register_member_draw').slideDown();
        } else {
            $('#register_member_draw').slideUp();
        }
    });
    if ($('#register_member').is(':checked')) {
        $('#register_member_draw').show();
    }
});