title: Asp.net Checkbox OnCheckedChanged not fired when JQuery checks check box
body: <p>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 <a href="http://tutorialzine.com/2011/03/better-check-boxes-jquery-css/" rel="nofollow">here</a>. My issue is that my asp OnCheckedChanged check box event is not being called when Jquery places a check in the check box.  </p>
  
  <h3>ASP.NET Master Page Scripts that works</h3>
  
  <pre><code>&lt;link href="~/Styles/jquery.tzCheckbox.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="&lt;%#ResolveUrl("~/Scripts/jquery.tzCheckbox.js") %&gt;"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="&lt;%#ResolveUrl("~/Scripts/script.js") %&gt;"&gt;&lt;/script&gt;
  </code></pre>
  
  <h3>Aspx Page with Checkbox</h3>
  
  <pre><code>&lt;asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"&gt;
  &lt;asp:DetailsView ID="DetailsView1" runat="server" Height="16px" Width="575px"&gt;
      &lt;Fields&gt;
          &lt;asp:TemplateField&gt;
              &lt;EditItemTemplate&gt;
                  &lt;asp:CheckBox ID="Edit_CheckBox1_CB" runat="server" AutoPostBack="true" OnCheckedChanged="Edit_CheckBox1_CB_Clicked" /&gt;
              &lt;/EditItemTemplate&gt;
              &lt;InsertItemTemplate&gt;
                  &lt;asp:CheckBox ID="CheckBox1" runat="server" /&gt;
              &lt;/InsertItemTemplate&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:CheckBox ID="CheckBox1" runat="server" /&gt;
              &lt;/ItemTemplate&gt;
          &lt;/asp:TemplateField&gt;
      &lt;/Fields&gt;
  &lt;/asp:DetailsView&gt;
  </code></pre>
  
  <p></p>
  
  <h3>JQuery Script called script.js</h3>
  
  <pre><code>(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 = $('&lt;span&gt;', {
              className: 'tzCheckBox ' + (this.checked ? 'checked' : ''),
              html: '&lt;span class="tzCBContent"&gt;' + labels[this.checked ? 0 : 1] +
                      '&lt;/span&gt;&lt;span class="tzCBPart"&gt;&lt;/span&gt;'
          });
  
          // 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);
  </code></pre>
  
  <h3>CSS file</h3>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <h3>Last Note</h3>
  
  <p>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!</p>