JSFiddle - React, Tailwind, and code Playground

by rothschild86

HTML

<html>

  <body>
    <div>
      <label><input type="checkbox" value="100">Option 1</label>
      <label><input type="checkbox" value="200">Option 2</label>
      <label><input type="checkbox" value="300">Option 3</label>
      <label><input type="checkbox" value="400">Option 4</label>
      <label><input type="checkbox" value="500">Option 5</label>
    </div>
  </body>

</html>

JavaScript

function toggleOtherCheckboxes(target) {
      var $checkbox = $(target);
      $checkbox.parent().parent().find('input:checkbox').not($checkbox).prop('checked', !target.checked);
    }

    jQuery(document).ready(function() {

      $(document).find('input[type="checkbox"]').click(function(e) {
        if (e.altKey)
          toggleOtherCheckboxes(e.currentTarget);
      });

      //Toggle checkboxes manually in FF, since it does not fwd clicks from <label> when alt is pressed
      $(document).find('label').click(function(e) {
        if (e.altKey && !window.chrome && !!e.target.control) { 
          e.target.control.checked = !e.target.control.checked;
          toggleOtherCheckboxes(e.target.control);
        }
      });

    });