jquery.shiftcheckbox.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. /* ShiftCheckbox jQuery plugin
  2. *
  3. * Copyright (C) 2011-2012 James Nylen
  4. *
  5. * Released under MIT license
  6. * For details see:
  7. * https://github.com/nylen/shiftcheckbox
  8. *
  9. * Requires jQuery v1.7 or higher.
  10. */
  11. (function($) {
  12. var ns = '.shiftcheckbox';
  13. $.fn.shiftcheckbox = function(opts) {
  14. opts = $.extend({
  15. checkboxSelector : null,
  16. selectAll : null,
  17. onChange : null,
  18. ignoreClick : null
  19. }, opts);
  20. if (typeof opts.onChange != 'function') {
  21. opts.onChange = function(checked) { };
  22. }
  23. $.fn.scb_changeChecked = function(opts, checked) {
  24. this.prop('checked', checked);
  25. opts.onChange.call(this, checked);
  26. return this;
  27. }
  28. var $containers,
  29. $checkboxes,
  30. $containersSelectAll,
  31. $checkboxesSelectAll,
  32. $otherSelectAll,
  33. $containersAll,
  34. $checkboxesAll;
  35. if (opts.selectAll) {
  36. // We need to set up a "select all" control
  37. $containersSelectAll = $(opts.selectAll);
  38. if ($containersSelectAll && !$containersSelectAll.length) {
  39. $containersSelectAll = false;
  40. }
  41. }
  42. if ($containersSelectAll) {
  43. $checkboxesSelectAll = $containersSelectAll
  44. .filter(':checkbox')
  45. .add($containersSelectAll.find(':checkbox'));
  46. $containersSelectAll = $containersSelectAll.not(':checkbox');
  47. $otherSelectAll = $containersSelectAll.filter(function() {
  48. return !$(this).find($checkboxesSelectAll).length;
  49. });
  50. $containersSelectAll = $containersSelectAll.filter(function() {
  51. return !!$(this).find($checkboxesSelectAll).length;
  52. }).each(function() {
  53. $(this).data('childCheckbox', $(this).find($checkboxesSelectAll)[0]);
  54. });
  55. }
  56. if (opts.checkboxSelector) {
  57. // checkboxSelector means that the elements we need to attach handlers to
  58. // ($containers) are not actually checkboxes but contain them instead
  59. $containersAll = this.filter(function() {
  60. return !!$(this).find(opts.checkboxSelector).filter(':checkbox').length;
  61. }).each(function() {
  62. $(this).data('childCheckbox', $(this).find(opts.checkboxSelector).filter(':checkbox')[0]);
  63. }).add($containersSelectAll);
  64. $checkboxesAll = $containersAll.map(function() {
  65. return $(this).data('childCheckbox');
  66. });
  67. } else {
  68. $checkboxesAll = this.filter(':checkbox');
  69. }
  70. if ($checkboxesSelectAll && !$checkboxesSelectAll.length) {
  71. $checkboxesSelectAll = false;
  72. } else {
  73. $checkboxesAll = $checkboxesAll.add($checkboxesSelectAll);
  74. }
  75. if ($otherSelectAll && !$otherSelectAll.length) {
  76. $otherSelectAll = false;
  77. }
  78. if ($containersAll) {
  79. $containers = $containersAll.not($containersSelectAll);
  80. }
  81. $checkboxes = $checkboxesAll.not($checkboxesSelectAll);
  82. if (!$checkboxes.length) {
  83. return;
  84. }
  85. var lastIndex = -1;
  86. var checkboxClicked = function(e) {
  87. var checked = !!$(this).prop('checked');
  88. var curIndex = $checkboxes.index(this);
  89. if (curIndex < 0) {
  90. if ($checkboxesSelectAll.filter(this).length) {
  91. $checkboxesAll.scb_changeChecked(opts, checked);
  92. }
  93. return;
  94. }
  95. if (e.shiftKey && lastIndex != -1) {
  96. var di = (curIndex > lastIndex ? 1 : -1);
  97. for (var i = lastIndex; i != curIndex; i += di) {
  98. $checkboxes.eq(i).scb_changeChecked(opts, checked);
  99. }
  100. }
  101. if ($checkboxesSelectAll) {
  102. if (checked && !$checkboxes.not(':checked').length) {
  103. $checkboxesSelectAll.scb_changeChecked(opts, true);
  104. } else if (!checked) {
  105. $checkboxesSelectAll.scb_changeChecked(opts, false);
  106. }
  107. }
  108. lastIndex = curIndex;
  109. };
  110. if ($checkboxesSelectAll) {
  111. $checkboxesSelectAll
  112. .prop('checked', !$checkboxes.not(':checked').length)
  113. .filter(function() {
  114. return !$containersAll.find(this).length;
  115. }).on('click' + ns, checkboxClicked);
  116. }
  117. if ($otherSelectAll) {
  118. $otherSelectAll.on('click' + ns, function() {
  119. var checked;
  120. if ($checkboxesSelectAll) {
  121. checked = !!$checkboxesSelectAll.eq(0).prop('checked');
  122. } else {
  123. checked = !!$checkboxes.eq(0).prop('checked');
  124. }
  125. $checkboxesAll.scb_changeChecked(opts, !checked);
  126. });
  127. }
  128. if (opts.checkboxSelector) {
  129. $containersAll.on('click' + ns, function(e) {
  130. if ($(e.target).closest(opts.ignoreClick).length) {
  131. return;
  132. }
  133. var $checkbox = $($(this).data('childCheckbox'));
  134. $checkbox.not(e.target).each(function() {
  135. var checked = !$checkbox.prop('checked');
  136. $(this).scb_changeChecked(opts, checked);
  137. });
  138. $checkbox[0].focus();
  139. checkboxClicked.call($checkbox, e);
  140. // If the user clicked on a label inside the row that points to the
  141. // current row's checkbox, cancel the event.
  142. var $label = $(e.target).closest('label');
  143. var labelFor = $label.attr('for');
  144. if (labelFor && labelFor == $checkbox.attr('id')) {
  145. if ($label.find($checkbox).length) {
  146. // Special case: The label contains the checkbox.
  147. if ($checkbox[0] != e.target) {
  148. return false;
  149. }
  150. } else {
  151. return false;
  152. }
  153. }
  154. }).on('mousedown' + ns, function(e) {
  155. if (e.shiftKey) {
  156. // Prevent selecting text by Shift+click
  157. return false;
  158. }
  159. });
  160. } else {
  161. $checkboxes.on('click' + ns, checkboxClicked);
  162. }
  163. return this;
  164. };
  165. })(jQuery);