<table class="pf-c-table pf-m-grid-lg" role="grid" aria-label="Shopping list">
  <caption>
    <span id="caption-text">1 of 4 items checked</span>
    &nbsp;
    <button id="check-all-button" class="pf-c-button pf-m-primary" type="button">
      Check all
    </button>
    <button id="uncheck-all-button" class="pf-c-button pf-m-secondary" type="button">
      Uncheck all
    </button>
  </caption>
  <thead>
    <tr>
      <td />
      <th scope="col">
        Item
      </th>
      <th scope="col">
        Quantity
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="pf-c-table__check">
        <input type="checkbox" name="sugar" aria-labelledby="item-1-sugar" />
      </td>
      <th data-label="Item">
        <div id="item-1-sugar">Sugar</div>
      </th>
      <td data-label="Quantity">
        1 cup
      </td>
    </tr>
    <tr>
      <td class="pf-c-table__check">
        <input type="checkbox" name="butter" aria-labelledby="item-2-butter" />
      </td>
      <th data-label="Item">
        <div id="item-2-butter">Butter</div>
      </th>
      <td data-label="Quantity">
        ½ cup
      </td>
    </tr>
    <tr class="checked">
      <td class="pf-c-table__check">
        <input type="checkbox" name="eggs" aria-labelledby="item-3-eggs" checked />
      </td>
      <th data-label="Item">
        <div id="item-3-eggs">Eggs</div>
      </th>
      <td data-label="Quantity">
        2
      </td>
    </tr>
    <tr>
      <td class="pf-c-table__check">
        <input type="checkbox" name="milk" aria-labelledby="item-4-milk" />
      </td>
      <th data-label="Item">
        <div id="item-4-milk">Milk</div>
      </th>
      <td data-label="Quantity">
        ½ cup
      </td>
    </tr>
  </tbody>
</table>
table tr.checked {
  text-decoration: line-through;
  background-color: #ebebeb;
}
const captionText = document.getElementById('caption-text');
const checkAllButton = document.getElementById('check-all-button');
const uncheckAllButton = document.getElementById('uncheck-all-button');
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

function updateSummary() {
  let numChecked = 0;
  checkboxes.forEach(function(checkbox) {
    if (checkbox.checked) {
      numChecked++;
    }
  });
  captionText.innerHTML = `${numChecked} of ${checkboxes.length} checked`;
  if (numChecked === 0) {
    checkAllButton.disabled = false;
    uncheckAllButton.disabled = true;
  } else {
    uncheckAllButton.disabled = false;
  }
  if (numChecked === checkboxes.length) {
    checkAllButton.disabled = true;
  }
}

checkAllButton.addEventListener('click', function() {
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = true;
    checkbox.closest('tr').className = 'checked';
  });
  updateSummary();
});

uncheckAllButton.addEventListener('click', function() {
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = false;
    checkbox.closest('tr').className = '';
  });
  updateSummary();
});

checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function(event) {
    checkbox.closest('tr').className = checkbox.checked ? 'checked' : '';
    updateSummary();
  });
});

External CSS

  1. https://unpkg.com/@patternfly/patternfly/patternfly.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.