var checkboxes = slice(document.querySelectorAll('.checkbox'));
  for (var checkbox of checkboxes)
    checkbox.logic = new Checkbox(checkbox);

<div class="demo">

  <h2>Custom checkboxes</h2>

  <div tabindex="0" class="checkbox" checked>
    Tim-Tams
  </div>
  <div tabindex="0" class="checkbox">
    Mint slices
  </div>

</div>

function Checkbox(el) {
    this.el = el;

    this.el.addEventListener('keydown', this.handleKeyDown.bind(this));
    this.el.addEventListener('click', this.toggle.bind(this));

    // Initialize role and aria-checked state.
    this.el.setAttribute('role', 'checkbox');
    if (this.el.hasAttribute('checked')) {
      this.el.setAttribute('aria-checked', 'true');
    } else {
      this.el.setAttribute('aria-checked', 'false');
    }
  }

  Checkbox.prototype.handleKeyDown = function(e) {
    switch(e.keyCode) {
      case VK_ENTER:
      case VK_SPACE: {
        this.toggle();
        break;
      }
    }
  };

  Checkbox.prototype.toggle = function() {
    if (this.el.hasAttribute('checked')) {
      this.el.removeAttribute('checked');

      // Keep checked attribute and aria-checked in sync.
      this.el.setAttribute('aria-checked', 'false');
    } else {
      this.el.setAttribute('checked', '');

      // Keep checked attribute and aria-checked in sync.
      this.el.setAttribute('aria-checked', 'true');
    }
  };

  //HERE IS THE QUESTION PART================================
  var checkboxes = slice(document.querySelectorAll('.checkbox'));
  for (var checkbox of checkboxes)
    checkbox.logic = new Checkbox(checkbox);

var checkboxes = slice(document.querySelectorAll('.checkbox'));
for (var checkbox of checkboxes)
checkbox.logic = new Checkbox(checkbox);

var checkbox = {logic: "doing stuff with the Checkbox class that was called"};