Checkbox not checked after click

Checkbox not checked after click

I've added some functionality to a checkbox. So that when the checkbox is checked it will display a div, when unchecked it will hide the div. This is working fine except when the checkbox is clicked, it doesn't display the checkmark in it. And when the form is submitted, the checkbox is unchecked.

Checkbox
  1. <input type="checkbox" name="m7bc41custom_addesign" value="Y" id="displaytyles" />
    <div id="stylediv">
    <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Format</h3>
    ...
    </div>





Jquery:
  1.     $(function() {
           
            function showstyles(){
                $(".AdikatForm").css("width","200px");
                return false;
            }

            function removestyles(){
                $(".AdikatForm").css("width","");
            }
            //run the currently selected effect
            function runEffect(){
                //get effect type from
                var selectedEffect = 'blind';
               
                //most effect types need no options passed by default
                var options = {};

                $("#effect").css("width","95%");
               
                //run the effect
                $("#effect").toggle(selectedEffect,options,500);
               
                showstyles();
            };
           
            //set effect from select menu value
            $("#displaytyles").click(function() {
                runEffect();
                $(this).attr( 'checked', true );
                return false;
            });
            $("#effect").hide();
            removestyles();       
        });



































Has anyone come across this before?