JSFiddle - React, Tailwind, and code Playground

by Jake Wolpert

HTML

<div id="wrapper">
  <form id="checkForm" method="GET" action="<?php deleteSelection($conn) ?>">
    <div>
      <label for="checkAll">Select All</label>
      <input type="checkbox" name="checkAll" id="checkAll">
    </div>
    <button type="submit" name="submit" id="submit">Delete Selected</button>
  </form>
  <label><input form="checkForm" type="checkbox" name="row_number[]" class="checkRow" value="1">Row 1</label>
  <label><input form="checkForm" type="checkbox" name="row_number[]" class="checkRow" value="2">Row 2</label>
  <label><input form="checkForm" type="checkbox" name="row_number[]" class="checkRow" value="3">Row 3</label>

</div>

JavaScript

$(function() {
  var checkBoxes = $("#wrapper .checkRow")
  var checkAll = $("#checkAll");
  var submitButton = $("#submit");

  checkAll.change(function() {
    $("#wrapper .checkRow").prop("checked", this.checked)
    submitButton.prop("disabled", !checkAll.prop("checked"));
  });

  checkBoxes.change(function() {
    $('#submit').prop('disabled', checkBoxes.filter(':checked').length < 1);
  }).change();


  $("#wrapper").on("click", ".checkRow", function() {
    checkBoxes = $("#wrapper .checkRow")
    checkAll.prop("checked", checkBoxes.filter(':not(:checked)').length < 1)
    submitButton.prop("disabled", !checkBoxes.filter(':checked').length);
  });
});