title: Gmail like Checkbox functionality
body: <p>I want to implement gmail like checkbox functionality:
  In which If CheckAll checkbox is clicked, all listed checkbox will be selected/unselected, if all listed checkbox are selected, CheckAll checkbox will be checked. and if only some checkbox are checked, - sign checkbox will be appear.</p>
  
  <p>I have implement logic using div.
  Here is the logic:
  <strong>HTML:</strong></p>
  
  <pre><code>&lt;table id="ViewTable" class="tableEffectfull"&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{
     width: 25px;
     height: 25px;
     margin-top: -4px;
     background: transparent url(images/prettyCheckable-green.png) top left no-repeat;
  }
  .CheckedCheckBox{
     background: transparent url(images/prettyCheckable-green.png) 0 -60px;
  }
  .unCheckedCheckBoxAll{
     width: 25px;
     height: 25px;
     margin-top: -4px;
     background: transparent url(images/Checkable-green.png) top left no-repeat;
  }
  .CheckedCheckBoxAll{
     background: transparent url(images/Checkable-green.png) 0 -60px;
  }
  </code></pre>
  
  <p><strong>Script:</strong>
  //updated scripts:</p>
  
  <pre><code>$(".unCheckedCheckBox").click(function () {
    $(this).toggleClass('CheckedCheckBox');
    $('.unCheckedCheckBoxAll').toggleClass('CheckedCheckBoxAll', $('.CheckedCheckBox').length == $(".unCheckedCheckBox").length)
  });
  $(".unCheckedCheckBoxAll").click(function () {
    $(this).toggleClass('CheckedCheckBoxAll');
    $('.unCheckedCheckBox').toggleClass('CheckedCheckBox')
  });
  </code></pre>
  
  <p>Now the problem is I am not getting what to do if all listed checkbox are selected, make checkedAll checkbox to be checked and if some are checked only highlighted checkbox will be display in checkedAll.</p>
  
  <p>Below is the Image I am using:</p>
  
  <p><img src="https://i.stack.imgur.com/tsaPu.png" alt="image"></p>