jquery.checkradios.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. /*
  2. CHECKRADIOS - jQuery plugin to allow custom styling of checkboxes
  3. by Chris McGuckin (https://github.com/cosmicwheels)
  4. License: MIT (http://opensource.org/licenses/MIT)
  5. Credits:
  6. ---------------------------------------------------------------------------------
  7. icomoon (http://icomoon.io/)
  8. Please refer to the icomoon website for the license regarding their icons.
  9. ---------------------------------------------------------------------------------
  10. Fontawesome (http://fortawesome.github.io/Font-Awesome/)
  11. Please refer to the fontawesome website for the license regarding their icons.
  12. ---------------------------------------------------------------------------------
  13. Stephan Richter (https://github.com/strichter)
  14. Thanks to Stephan for pointing out and helping to add the triggering of events
  15. to help further mimic the checkboxes and radios as well as providing other
  16. important bug fixes.
  17. ---------------------------------------------------------------------------------
  18. ---------------------------------------------------------------------------------
  19. */
  20. (function ($) {
  21. $.fn.checkradios = function (options) {
  22. var $elements = this;
  23. //Default Settings
  24. var settings = $.extend({
  25. checkbox: {
  26. iconClass: 'icon-checkradios-checkmark'
  27. },
  28. radio: {
  29. iconClass: 'icon-checkradios-circle'
  30. },
  31. onChange: function (checked, $element, $realElement) {}
  32. }, options);
  33. // Functionality
  34. var form = {
  35. checkbox: function ($checkbox) {
  36. var THIS = this;
  37. //Make sure checkradios isnt already in use
  38. if (!$checkbox.parent().hasClass('checkradios-checkbox')) {
  39. //Get the elements classes
  40. var classes = $checkbox.attr('class');
  41. if (classes === undefined) {
  42. classes = '';
  43. }
  44. //Wrap the input
  45. var $item = $checkbox.wrap('<div class="checkradios-checkbox ' + classes + '"/>');
  46. //Get the new checkbox
  47. var $holder = $item.parent();
  48. //Check if box is checked
  49. if ($item.is(':checked')) {
  50. THIS.checkboxEnable($item);
  51. } else {
  52. THIS.checkboxDisable($item);
  53. }
  54. //Add keyboard support
  55. $checkbox.keypress(function (e) {
  56. var key = e.keyCode;
  57. //On enter/return or space
  58. if ((key < 1) || (key == 13) || (key == 32)) {
  59. $holder.click();
  60. }
  61. });
  62. //Add tabbing support
  63. $checkbox.on({
  64. focusin: function () {
  65. $holder.addClass('focus');
  66. },
  67. focusout: function () {
  68. var $this = $(this);
  69. setTimeout(function () {
  70. if (!$this.is(':focus')) {
  71. $holder.removeClass('focus');
  72. }
  73. }, 10);
  74. }
  75. });
  76. $holder.mousedown(function () {
  77. setTimeout(function () {
  78. //Add focus
  79. $checkbox.focus();
  80. }, 10);
  81. });
  82. //Disable usual click functionality
  83. $checkbox.click(function (e) {
  84. e.stopPropagation();
  85. e.preventDefault();
  86. });
  87. //On button click
  88. $holder.click(function () {
  89. //Add check
  90. if ($item.is(':checked')) {
  91. THIS.checkboxDisable($item);
  92. //Callback
  93. settings.onChange(false, $holder, $item);
  94. } else {
  95. THIS.checkboxEnable($item);
  96. //Callback
  97. settings.onChange(true, $holder, $item);
  98. }
  99. return false;
  100. });
  101. }
  102. },
  103. radio: function ($radio) {
  104. var THIS = this;
  105. //Make sure checkradios isnt already in use
  106. if (!$radio.parent().hasClass('checkradios-radio')) {
  107. //Get the elements classes
  108. var classes = $radio.attr('class');
  109. if (classes === undefined) {
  110. classes = '';
  111. }
  112. //Wrap the input
  113. var $item = $radio.wrap('<div class="checkradios-radio ' + classes + '"/>');
  114. //Get the new checkbox
  115. var $holder = $item.parent();
  116. //Check if box is checked
  117. if ($item.is(':checked')) {
  118. THIS.radioEnable($item);
  119. } else {
  120. THIS.radioDisable($item);
  121. }
  122. //Add tabbing suppot
  123. $radio.on({
  124. focusin: function () {
  125. //Add focus class
  126. $holder.addClass('focus');
  127. THIS.radioEnable($item);
  128. //Get group Name
  129. var radio_name = $item.attr('name');
  130. var $group = $('input[name="' + radio_name + '"]');
  131. //Set checked/unchecked for each element in group
  132. $group.each(function () {
  133. if ($(this).is(':checked')) {
  134. THIS.radioEnable($(this));
  135. //Callback
  136. settings.onChange(true, $(this).parent(), $(this));
  137. } else {
  138. THIS.radioDisable($(this));
  139. //Callback
  140. settings.onChange(false, $(this).parent(), $(this));
  141. }
  142. });
  143. },
  144. focusout: function () {
  145. var $this = $(this);
  146. setTimeout(function () {
  147. if (!$this.is(':focus')) {
  148. $holder.removeClass('focus');
  149. }
  150. }, 10);
  151. }
  152. });
  153. $holder.click(function () {
  154. //Add focus
  155. $radio.focus();
  156. });
  157. //Disable usual click functionality
  158. $radio.click(function (e) {
  159. e.stopPropagation();
  160. e.preventDefault();
  161. });
  162. }
  163. },
  164. /*Private*/
  165. checkboxEnable: function ($checkbox) {
  166. $checkbox.parent().removeClass(settings.checkbox.iconClass);
  167. $checkbox.parent().removeClass('unchecked');
  168. $checkbox.parent().addClass(settings.checkbox.iconClass);
  169. $checkbox.parent().addClass('checked');
  170. $checkbox.prop('checked', true).trigger('change');
  171. },
  172. checkboxDisable: function ($checkbox) {
  173. $checkbox.parent().removeClass(settings.checkbox.iconClass);
  174. $checkbox.parent().addClass('unchecked');
  175. $checkbox.prop('checked', false).trigger('change');
  176. },
  177. radioEnable: function ($radio) {
  178. $radio.parent().removeClass(settings.radio.iconClass);
  179. $radio.parent().removeClass('unchecked');
  180. $radio.parent().addClass(settings.radio.iconClass);
  181. $radio.parent().addClass('checked');
  182. $radio.prop('checked', true).trigger('change');
  183. },
  184. radioDisable: function ($radio) {
  185. $radio.parent().removeClass('checked');
  186. $radio.parent().removeClass(settings.radio.iconClass);
  187. $radio.parent().addClass('unchecked');
  188. $radio.prop('checked', false).trigger('change');
  189. }
  190. };
  191. //Loop through elements
  192. $elements.each(function (i, val) {
  193. var $this = $(this);
  194. //Check for checkbox
  195. if ($this.is("input[type=checkbox]")) {
  196. //Setup checkboxes
  197. form.checkbox($this);
  198. }
  199. //Check for radio
  200. if ($this.is("input[type=radio]")) {
  201. //Setup checkboxes
  202. form.radio($this);
  203. }
  204. return this;
  205. });
  206. };
  207. }(jQuery));