Advanced Search

Select "All" functionality with rows and cols of checkboxes

/ Published in: jQuery
Save to your folder(s)
The jQuery code also makes use of the [jQuery.checkBox](http://plugins.jquery.com/project/ui-checkbox) plugin.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.