title: jQuery toggling the class with .removeClass() and .addClass() not working properly
body: <p>I have implemented toggling in my way as described code below.
  <strong>HTML:</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="selectCol"&gt;&lt;div class="unCheckedCheckBoxAll"&gt;&lt;/div&gt;&lt;/th&gt;
              &lt;th class="nosCol"&gt;Products&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div class="unCheckedCheckBox"&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;ABCD&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div class="unCheckedCheckBox"&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;PQRS&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.unCheckedCheckBox, .unCheckedCheckBoxAll
  {
     width: 25px;
     height: 25px;
     margin-top: -4px;
     background: transparent url(http://i.stack.imgur.com/tsaPu.png) top left no-repeat;
  }
  .CheckedCheckBox,.CheckedCheckBoxAll
  {
     width: 25px;
     height: 25px;
     margin-top: -4px;
     background: transparent url(http://i.stack.imgur.com/tsaPu.png) 0 -60px;
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(".CheckedCheckBox").click(function () {
      $(this).removeClass('CheckedCheckBox').addClass('unCheckedCheckBox');
      if ($(".CheckedCheckBox").length == 0) {
          $('.CheckedCheckBoxAll').removeClass('CheckedCheckBoxAll').addClass('unCheckedCheckBoxAll');
      }
  });
  $(".unCheckedCheckBox").click(function () {
      $(this).removeClass('unCheckedCheckBox').addClass('CheckedCheckBox');
      if ($(".unCheckedCheckBox").length == 0) {
          $('.unCheckedCheckBoxAll').removeClass('unCheckedCheckBoxAll').addClass('CheckedCheckBoxAll');
      }
  });
  $(".CheckedCheckBoxAll").click(function () {
      $(this).removeClass('CheckedCheckBoxAll').addClass('unCheckedCheckBoxAll');
      $('.CheckedCheckBox').removeClass('CheckedCheckBox').addClass('unCheckedCheckBox');
  });
  $(".unCheckedCheckBoxAll").click(function () {
      $(this).removeClass('unCheckedCheckBoxAll').addClass('CheckedCheckBoxAll');
      $('.unCheckedCheckBox').removeClass('unCheckedCheckBox').addClass('CheckedCheckBox');
  });
  </code></pre>
  
  <p>Now the problem is, when I click on unchecked div, it becomes checked div but when I click on checked div, it goes in unchecked function though class is checked.
  Help me. I am not getting what's problem. </p>
  
  <p>Here is the jsfiddle link:</p>
  
  <p><a href="http://jsfiddle.net/nscZA/3/" rel="nofollow noreferrer">http://jsfiddle.net/nscZA/3/</a></p>
  
  <p>Image I am using:</p>
  
  <p><img src="https://i.stack.imgur.com/XE6mn.png" alt="image"></p>