JSFiddle - React, Tailwind, and code Playground

by godfrzero

HTML

<input type="text">
<input type="cheese">
<input type="radio">
<div contenteditable="true"></div>
<div>camel</div>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

CSS

input {
  display: block;
}

JavaScript

/* $(document).ready(function () { */
  let $body = document.querySelector('body');
  let weCare = false;
  let inputCount;

  function handleCheckboxChange (e) {
    if (inputCount) {
      let checkboxes = Array.prototype.slice.call(document.querySelectorAll('input[type="checkbox"]')),
      thisCheckbox = e.target,
      thisCheckboxIndex;

      checkboxes.find((el, index) => {
        if (el.isSameNode(thisCheckbox)) {
          thisCheckboxIndex = index;
          return true;
        }
      });

      while(inputCount) {
        let nextCheckbox = checkboxes[thisCheckboxIndex];

        nextCheckbox.checked = thisCheckbox.checked;

        thisCheckboxIndex++;
        inputCount--;
      }

      weCare = false;
      inputCount = 0;

      thisCheckbox.blur();
    }
  }

  function countSpy (e) {
    let $target = e.target;

    if ($target.tagName.toLowerCase() !== 'input' && !$target.isContentEditable) {
      if (weCare) {
        if (e.keyCode >= 48 && e.keyCode <= 57) {
          inputCount = inputCount * 10 + (e.keyCode - 48)
        } else {
          weCare = false;
        }
      }

      if (e.keyCode === 67) {
        weCare = true;
        inputCount = 0;
      }
    } else {
      weCare = false;
    }
  }
  
  function attachDelegatedListener ($el, event, selector, handler) {
  	if (!handler && typeof selector === 'function') {
    	handler = selector;
      selector = undefined;
    }

  	$el.addEventListener(event, function (e) {
    	if (selector) {
      	e.target.matches(selector) && handler(e);
      }
      else {
      	handler(e);
      }
    });
  }
  
  attachDelegatedListener($body, 'change', 'input[type="checkbox"]', handleCheckboxChange);
  attachDelegatedListener($body, 'keydown', countSpy);
/* }); */