A CodePen by Yogendra Rampuria - Yogi. Grouping table with bulk ops

index.html

<table id="deptInfo">
  <thead>
    <tr>
      <th>Login</th>
      <th>Account Name</th>
      <th><span class="keep"><input type="checkbox" />Keep  (<span class="count"><span class="selected">0</span>/<span class="total">0</span></span>) </span></th>
      <th><span class="remove"><input type="checkbox" class="remove" />Remove  (<span class="count"><span class="selected">0</span>/<span class="total">0</span></span>) </span></th>
    </tr>
  </thead>
  <tbody class="dept-name">
    <tr>
      <th colspan="2"><span class="button toggle ui-icon ui-icon-plus"></span><span class="name">Department 1</span></th>
      <th><span class="keep"><input type="checkbox" />Keep  (<span class="count"><span class="selected">0</span>/<span class="total">0</span></span>) </span></th>
      <th><span class="remove"><input type="checkbox" class="remove" />Remove  (<span class="count"><span class="selected">0</span>/<span class="total">0</span></span>) </span></th>
    </tr>
  </tbody>
  <tbody class="dept-detail">
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
  </tbody>
 <tbody class="dept-name">
    <tr>
      <th colspan="2"><span class="button toggle ui-icon ui-icon-plus"></span><span class="name">Department 1</span></th>
      <th><span class="keep"><input type="checkbox" />Keep  (<span class="count"><span class="selected">0</span>/<span class="total">0</span></span>) </span></th>
      <th><span class="remove"><input type="checkbox" class="remove" />Remove  ( <span class="count"><span class="selected">0</span>/<span class="total">0</span></span>) </span></th>
    </tr>
  </tbody>
  <tbody class="dept-detail">
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
  </tbody>
 <tbody class="dept-name">
    <tr>
      <th colspan="2"><span class="button toggle ui-icon ui-icon-plus"></span><span class="name">Department 1</span></th>
      <th><span class="keep"><input type="checkbox" />Keep  (<span class="count"><span class="selected">0</span>/<span class="total">0</span></span>) </span></th>
      <th><span class="remove"><input type="checkbox" class="remove" />Remove  (<span class="count"><span class="selected">0</span>/<span class="total">0</span></span>) </span></th>
    </tr>
  </tbody>
  <tbody class="dept-detail">
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
    <tr>
      <td>login1</td>
      <td>Logine 1</td>
      <td><span class="keep"><input type="checkbox" name="" id="" /></span></td>
      <td><span class="remove"><input type="checkbox" name="" id="" /></span></td>
    </tr>
  </tbody>
</table>

script.js

$(function(){
    var tbl = $("#deptInfo");
    var head = tbl.find('thead');
    var buttonCountUpdate = function(){
      $(['.keep','.remove']).each(function(i,e){
        var cl = e;
        var btn = tbl.find(".dept-detail "+ cl +" input:checkbox");
        var t= btn.length , s= btn.filter(":checked").length;
        tbl.find("thead "+ cl +" .count .total").html( t );
        tbl.find("thead "+ cl +" .count .selected").html( s );
        tbl.find('.dept-name').each(function(i,e){
          var nm = $(this);
          var det = nm.next(".dept-detail");
          var btn = det.find(cl + " input:checkbox");
          var t= btn.length , s= btn.filter(":checked").length;
          nm.find(cl + " .count .total").html( t );
          nm.find(cl + " .count .selected").html( s );
        });
      });
    };
    tbl.on( "update", buttonCountUpdate)
    .delegate("thead .remove input:checkbox","change", function(){
      tbl.find(".dept-detail .remove input:checkbox, .dept-name .remove input:checkbox").prop("checked", $(this).is(":checked"));
      if($(this).is(":checked")){
        tbl.find(".dept-detail .keep input:checkbox, .dept-name .keep input:checkbox").prop("checked", !$(this).is(":checked"));
      }
    })
    .delegate("thead .keep input:checkbox", "change", function(){
      tbl.find(".dept-detail .keep input:checkbox, .dept-name .keep input:checkbox").prop("checked", $(this).is(":checked"));
      if($(this).is(":checked")){
        tbl.find(".dept-detail .remove input:checkbox, .dept-name .remove input:checkbox").prop("checked", !$(this).is(":checked"));
      }
    })
    .delegate(".dept-name .remove input:checkbox", "change", function(){
      var det = $(this).parents('.dept-name').next('.dept-detail');
      var name = $(this).parents(".dept-name");
      det.find(".remove input:checkbox").prop("checked", $(this).is(":checked"));
      if(!$(this).is(":checked")){
         tbl.find("thead .remove input:checkbox").prop("checked", false);
      }
    })
    .delegate(".dept-name .keep input:checkbox", "change", function(){
      var det = $(this).parents('.dept-name').next('.dept-detail');
      var name = $(this).parents(".dept-name");
      det.find(".keep input:checkbox").prop("checked", $(this).is(":checked"));
      if(!$(this).is(":checked")){
        tbl.find("thead .keep input:checkbox").prop("checked", false);
      }
    })
    .delegate(".dept-detail .keep input:checkbox", "change", function(e){
      var v = $(this).parents(".dept-detail").find(".keep input:checkbox");
      $(this).parents(".dept-detail").prev(".dept-name").find(".keep input:checkbox").prop("checked", v.length == v.filter(":checked"));
      v = tbl.find(".dept-detail .keep input:checkbox");
      head.find(".keep input:checkbox").prop("checked",v.length == v.filter(":checked"));
    })
    .delegate(".dept-detail .remove input:checkbox", "change", function(){
      var v = $(this).parents(".dept-detail").find(".remove input:checkbox");
      $(this).parents(".dept-detail").prev(".dept-name").find(".remove input:checkbox").prop("checked", v.length == v.filter(":checked"));
      v = tbl.find(".dept-detail .remove input:checkbox");
      head.find(".remove input:checkbox").prop("checked",v.length == v.filter(":checked"));
    })
    .delegate(".remove input:checkbox", 'change', function(){
      var btn = $(this);
      var obtn = btn.parents("tr").find('.keep input:checkbox');
      var chk = btn.is(":checked");
      if(chk){
        obtn.prop("checked", false).change();
      }
      tbl.trigger("update");
    })
    .delegate(".keep input:checkbox", 'change', function(){
      var btn = $(this);
      var obtn = btn.parents("tr").find('.remove input:checkbox');
      var chk = btn.is(":checked");
      if(chk){
        obtn.prop("checked", false).change();
      }
      tbl.trigger("update");
    })
    ;
    tbl.trigger("update");
  });

style.css

#deptInfo thead tr{
  background: #77F;
}
#deptInfo .dept-name tr{
  background: #77A; 
}
.dept-name .button, .dept-name .name {
  display:inline-block;
}
th{
  text-align: left;
}