Skip to content

Instantly share code, notes, and snippets.

@mcaskill

mcaskill/check-multiple-inputs.js

Last active September 19, 2020 16:43
Show Gist options
  • Save mcaskill/df6e703178d81c813f2f4b01818a315c to your computer and use it in GitHub Desktop.
Save mcaskill/df6e703178d81c813f2f4b01818a315c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mcaskill revised this gist Sep 19, 2020. No changes.
  2. mcaskill created this gist Sep 19, 2020.
    39 changes: 39 additions & 0 deletions check-multiple-inputs.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    (function () {
    const table = document.getElementById('my-table');
    let lastInput = null;

    table.addEventListener('click', function (event) {
    const currInput = event.target;

    if (currInput.type !== 'checkbox') {
    return;
    }

    if (event.shiftKey && lastInput !== null && lastInput !== currInput) {
    const inputs = table.querySelectorAll('input[type="checkbox"]');

    lastInput.checked = currInput.checked;
    lastInput.dispatchEvent(new Event('change', {
    bubbles: true,
    cancelable: true
    }));

    let inBetween = false;
    inputs.forEach(function (input) {
    if (input === lastInput || input === currInput) {
    inBetween = !inBetween;
    } else if (inBetween) {
    input.checked = currInput.checked;
    input.dispatchEvent(new Event('change', {
    bubbles: true,
    cancelable: true
    }));
    }
    });
    }

    lastInput = currInput;
    }, {
    passive: true
    });
    })();