Posted By

nijgnet on 04/01/10


Tagged


Versions (?)

Select "All" functionality with rows and cols of checkboxes


 / Published in: jQuery
 

The jQuery code also makes use of the jQuery.checkBox plugin.

  1. // Select "All" functionality
  2. $('#schedule-table').each(function()
  3. {
  4. var rows = $('#schedule-table tbody tr');
  5. var rowsCnt = $(rows).size();
  6.  
  7. var i = 0; var j = 0;
  8. // enumerate rows
  9. $(rows).each(function() {
  10. $(this).attr('title', ++i);
  11. var k = 0;
  12. // enumerate cols
  13. $(this).find('td').each(function () {
  14. $(this).attr('title', ++k);
  15. });
  16. });
  17. // enumerate the links
  18. $(rows).eq(rowsCnt-1).find('a').each(function() {
  19. $(this).attr('title', ++j);
  20. });
  21.  
  22. // links functionality
  23. $('#schedule-table td a').bind('click', function()
  24. {
  25. var thisrow = $(this).parents('tr').find('td');
  26.  
  27. // toggle the rows
  28. if ($(thisrow).size()-1 == 7)
  29. {
  30. $(thisrow).find('input[type=checkbox]').checkBox('changeCheckStatus', true);
  31. }
  32. // toggle the columns
  33. if (parseInt($(this).parents('tr').attr('title')) == rowsCnt)
  34. {
  35. var thiscol = parseInt($(this).attr('title'));
  36. $(rows).find('td[title='+thiscol+'] input[type=checkbox]').checkBox('changeCheckStatus', true);
  37. }
  38. });
  39. });
  40.  
  41. /*** HTML ******************************/
  42.  
  43. <table id="schedule-table">
  44. <thead>
  45. <tr>
  46. <th scope="col"></th>
  47. <th scope="col">S</th>
  48. <th scope="col">M</th>
  49.  
  50. <th scope="col">T</th>
  51. <th scope="col">W</th>
  52. <th scope="col">Th</th>
  53. <th scope="col">F</th>
  54. <th scope="col">Sa</th>
  55. <th scope="col"></th>
  56.  
  57. </tr>
  58. </thead>
  59. <tbody>
  60. <tr>
  61. <th scope="row">Morning</th>
  62. <td><input type="checkbox" name="" value="" class="form-checkbox" /></td>
  63. <td><input type="checkbox" name="input3" value="" class="form-checkbox" /></td>
  64. <td><input type="checkbox" name="input6" value="" class="form-checkbox" /></td>
  65.  
  66. <td><input type="checkbox" name="input9" value="" class="form-checkbox" /></td>
  67. <td><input type="checkbox" name="input12" value="" class="form-checkbox" /></td>
  68. <td><input type="checkbox" name="input15" value="" class="form-checkbox" /></td>
  69. <td><input type="checkbox" name="input18" value="" class="form-checkbox" checked="checked" /></td>
  70. <td><a>All</a></td>
  71. </tr>
  72. <tr>
  73. <th scope="row">Afternoon</th>
  74.  
  75. <td><input type="checkbox" name="input" value="" class="form-checkbox" /></td>
  76. <td><input type="checkbox" name="input4" value="" class="form-checkbox" /></td>
  77. <td><input type="checkbox" name="input7" value="" class="form-checkbox" checked="checked" /></td>
  78. <td><input type="checkbox" name="input10" value="" class="form-checkbox" /></td>
  79. <td><input type="checkbox" name="input13" value="" class="form-checkbox" /></td>
  80. <td><input type="checkbox" name="input16" value="" class="form-checkbox" /></td>
  81. <td><input type="checkbox" name="input19" value="" class="form-checkbox" checked="checked" /></td>
  82. <td><a>All</a></td>
  83.  
  84. </tr>
  85. <tr>
  86. <th scope="row">Evening</th>
  87. <td><input type="checkbox" name="input2" value="" class="form-checkbox" /></td>
  88. <td><input type="checkbox" name="input5" value="" class="form-checkbox" /></td>
  89. <td><input type="checkbox" name="input8" value="" class="form-checkbox" checked="checked" /></td>
  90. <td><input type="checkbox" name="input11" value="" class="form-checkbox" checked="checked" /></td>
  91. <td><input type="checkbox" name="input14" value="" class="form-checkbox" checked="checked" /></td>
  92.  
  93. <td><input type="checkbox" name="input17" value="" class="form-checkbox" /></td>
  94. <td><input type="checkbox" name="input20" value="" class="form-checkbox" checked="checked" /></td>
  95. <td><a>All</a></td>
  96. </tr>
  97. <tr>
  98. <th scope="row"></th>
  99. <td><a>All</a></td>
  100. <td><a>All</a></td>
  101.  
  102. <td><a>All</a></td>
  103. <td><a>All</a></td>
  104. <td><a>All</a></td>
  105. <td><a>All</a></td>
  106. <td><a>All</a></td>
  107. <td></td>
  108.  
  109. </tr>
  110. </tbody>
  111. </table>

Report this snippet  

You need to login to post a comment.