JQuery Check box matrix plugin.

JQuery Check box matrix plugin.


Whenever you have a situation to check all the sub categories when you check on a main category, then you can use this plugin. This works with iCheck plugin. For example when you click on category 2 - s2 plugin will click Grade1 - s2 and Grade2-s2 automatically. You have to include a main category in a separate tbody tag.

HTML Table :

<table id="tableID" >
<thead>
<tr>
<th></th>
<th>s2</th>
<th>s3</th>
<th>shift test</th>
</tr>
</thead>

<tbody>
<tr>
<td>Category 2</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>Grade 1</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>Grade 1</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>

<tr>
<td>Grade 2</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</tbody>

<tbody>
<tr>
<td>Test cat 2</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>

<tr>
<td>Grade 5</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>

<tr>
<td>Grade 6</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>

<tr>
<td>Grade 7</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</tbody>
</table>




Jquery plugin:

(function($) {
        $.fn.treeCheckTable = function() {           
        $(this).find("tbody").each(function(){
            var tbody = $(this);
            var headTr = $(this).find("tr:eq(0)");
            var lock = false;
            $(headTr).find("td:eq(0)").css("cursor","pointer");
            var bodyTrs = $(tbody).find("tr:gt(0)");
            var trCount = bodyTrs.length;
            $(this).find("tr:gt(0)").css('display','none');
            // show/hide children
            $(headTr).find("td:eq(0)").click(function(){
                $(bodyTrs).toggle();
            });

            // Header input checkbox click
            $($(headTr).find('input')).on("ifToggled",function(event){   
                 if(!lock){
                     lock = true;
                  var index = $(this).parents().parents().index();
                  var isChecked = $(this).is(":checked");             
                  $(bodyTrs).each(function(){
                    $(this).find("td:eq("+index+") input").iCheck(isChecked?"check":"uncheck");
                  });                 
                  lock = false;
                   }
           });       
             // body input checkbox click
           $($(bodyTrs).find('input')).on('ifToggled',function(event){  
               if(!lock){
                   lock = true;
                     var index = $(this).parents().parents().index();   
                     $(this).iCheck("update");
                  var inputCheckedCount = 0;                 
                  $(bodyTrs).find("td:eq("+index+") input").each(function(){                          
                      if($(this).is(":checked")){
                         inputCheckedCount++;
                      }                                           
                  });                 
                  $(headTr).find("td:eq("+index+") input").iCheck(trCount == inputCheckedCount ?"check" :"uncheck");                
                  lock = false;
               }
               });
            // Update tbody Headers (category row)                          
            $(headTr).find("td:gt(0)").each(function(i){                           
                      var td = $(this);                          
                      var count = 0;
                      $(bodyTrs).find("td:eq("+(i+1)+")").find("input").each(function(){
                      $(this).iCheck("update");
                      if($(this).is(":checked")){                                 
                        count++;
                      }                                           
                      });                               
                      if(trCount == count)
                          $(td).find("input").iCheck("check");                               
             });
        });
    };
}(jQuery));