<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>
<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
External JavaScript
This Pen doesn't use any external JavaScript resources.