checklist-box.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. $(function () {
  2. $('.list-group.checked-list-box .list-group-item').each(function () {
  3. // Settings
  4. var $widget = $(this),
  5. $checkbox = $('<input type="checkbox" class="hidden" />'),
  6. color = ($widget.data('color') ? $widget.data('color') : "default"),
  7. style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"),
  8. settings = {
  9. on: {
  10. icon: 'glyphicon glyphicon-check'
  11. },
  12. off: {
  13. icon: 'glyphicon glyphicon-unchecked'
  14. }
  15. };
  16. $widget.css('cursor', 'pointer')
  17. $widget.append($checkbox);
  18. // Event Handlers
  19. $widget.on('click', function () {
  20. $checkbox.prop('checked', !$checkbox.is(':checked'));
  21. $checkbox.triggerHandler('change');
  22. updateDisplay();
  23. });
  24. $checkbox.on('change', function () {
  25. updateDisplay();
  26. });
  27. // Actions
  28. function updateDisplay() {
  29. var isChecked = $checkbox.is(':checked');
  30. // Set the button's state
  31. $widget.data('state', (isChecked) ? "on" : "off");
  32. // Set the button's icon
  33. // $widget.find('.state-icon')
  34. // .removeClass()
  35. // .addClass('state-icon ' + settings[$widget.data('state')].icon);
  36. // Update the button's color
  37. // if (isChecked) {
  38. // $widget.addClass('active');
  39. // } else {
  40. // $widget.removeClass('active');
  41. // }
  42. }
  43. // Initialization
  44. function init() {
  45. if ($widget.data('checked') == true) {
  46. $checkbox.prop('checked', !$checkbox.is(':checked'));
  47. }
  48. updateDisplay();
  49. // Inject the icon if applicable
  50. if ($widget.find('.state-icon').length == 0) {
  51. $widget.prepend('<span class="state-icon ' + settings[$widget.data('state')].icon + '"></span>');
  52. }
  53. }
  54. init();
  55. });
  56. $('#get-checked-data').on('click', function(event) {
  57. event.preventDefault();
  58. var checkedItems = {}, counter = 0;
  59. $("#check-list-box li.active").each(function(idx, li) {
  60. checkedItems[counter] = $(li).text();
  61. counter++;
  62. });
  63. $('#display-json').html(JSON.stringify(checkedItems, null, '\t'));
  64. });
  65. });