Asp.net Checkbox OnCheckedChanged not fired when JQuery checks check box

Thank you for taking the time to read and review my post. I've done a lot of Google searching but have yet to find the answer to my jquery/asp.net question. My issue is I'm trying to replace the standard check box with an on/off image. There is a neat tutorial about doing this here. My issue is that my asp OnCheckedChanged check box event is not being called when Jquery places a check in the check box.

ASP.NET Master Page Scripts that works

<link href="~/Styles/jquery.tzCheckbox.css" rel="style开发者_开发知识库sheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<%#ResolveUrl("~/Scripts/jquery.tzCheckbox.js") %>"></script>
<script type="text/javascript" src="<%#ResolveUrl("~/Scripts/script.js") %>"></script>

Aspx Page with Checkbox

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:DetailsView ID="DetailsView1" runat="server" Height="16px" Width="575px">
    <Fields>
        <asp:TemplateField>
            <EditItemTemplate>
                <asp:CheckBox ID="Edit_CheckBox1_CB" runat="server" AutoPostBack="true" OnCheckedChanged="Edit_CheckBox1_CB_Clicked" />
            </EditItemTemplate>
            <InsertItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </InsertItemTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Fields>
</asp:DetailsView>

JQuery Script called script.js

(function ($) {
$.fn.tzCheckbox = function (options) {

    // Default On / Off labels:

    options = $.extend({
        labels: ['ON', 'OFF']
    }, options);

    return this.each(function () {
        var originalCheckBox = $(this),
            labels = [];

        // Checking for the data-on / data-off HTML5 data attributes:
        if (originalCheckBox.data('on')) {
            labels[0] = originalCheckBox.data('on');
            labels[1] = originalCheckBox.data('off');
        }
        else labels = options.labels;

        // Creating the new checkbox markup:
        var checkBox = $('<span>', {
            className: 'tzCheckBox ' + (this.checked ? 'checked' : ''),
            html: '<span class="tzCBContent">' + labels[this.checked ? 0 : 1] +
                    '</span><span class="tzCBPart"></span>'
        });

        // Inserting the new checkbox, and hiding the original:
        checkBox.insertAfter(originalCheckBox.hide());

        checkBox.click(function () {
            checkBox.toggleClass('checked');

            var isChecked = checkBox.hasClass('checked');

            // Synchronizing the original checkbox:
            originalCheckBox.attr('checked', isChecked);
            checkBox.find('.tzCBContent').html(labels[isChecked ? 0 : 1]);
            if (isChecked) {
               originalCheckBox.attr('checked', isChecked);
            }

        });

        // Listening for changes on the original and affecting the new one:
        originalCheckBox.bind('change', function () {
            checkBox.click();
        });
    });
};
})(jQuery);

CSS file

.tzCheckBox{
background:url("../Images/background01.png") no-repeat right bottom;
display:inline-block;
min-width:60px;
height:33px;
white-space:nowrap;
position:relative;
cursor:pointer;
margin-left:14px;
}

.tzCheckBox.checked{
background-position:top left;
margin:0 14px 0 0;
}

.tzCheckBox .tzCBContent{
color: white;
line-height: 31px;
padding-right: 38px;
text-align: right;
}

.tzCheckBox.checked .tzCBContent{
text-align:left;
padding:0 0 0 38px;
}

.tzCBPart
{ 
    background:url("../images/background01.png") no-repeat left bottom;
width:14px;
position:absolute;
top:0;
left:-14px;
height:33px;
overflow: hidden;
}

 .tzCheckBox.checked .tzCBPart{
background-position:top right;
left:auto;
right:-14px;
}

Last Note

Everything works as needed, I just can't seen to get the page to auto post when JQuery checks the check box. Thank you again for your help!

Changes made through javascript will not fire events such as onclick or onchange. What you will need to do is fire the event yourself once you change the value of checked. I am not familiar with the particulars of .net's OnCheckedChanged, but let's assume in the html it turns into onchange (you will need to verify this through viewing the source). You would do something like this:

originalCheckBox.attr('checked', isChecked);
originalCheckBox.change(); // will call the onchange code