A good first building block

Select or clear all checkboxes

A master checkbox follows a small group, including its indeterminate state.

HTMLCSSJavaScriptNo dependencies

Live preview

Explore the result below

HTML

<main><h1>Choose your ingredients</h1><label><input type="checkbox" id="all"> Select all available items</label><fieldset><legend>Ingredients</legend><label><input type="checkbox" class="item" value="tomato"> Tomato</label><label><input type="checkbox" class="item" value="basil"> Basil</label><label><input type="checkbox" class="item" value="cheese"> Cheese</label><label><input type="checkbox" class="item" value="bread" disabled> Bread (unavailable)</label></fieldset><p id="selection" role="status">0 of 3 selected.</p></main>

CSS

:root{font-family:system-ui,sans-serif;color:#18223b}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;background:#edf1ff;display:grid;place-items:center}main{width:min(100%,480px);background:white;border-radius:20px;padding:24px}h1{font-size:24px;margin:0 0 16px}button,input,select,textarea{font:inherit}button{min-height:44px;border:1px solid #afbddd;border-radius:10px;padding:10px 14px;background:#eff3ff;color:#18223b;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #3658bf;outline-offset:3px}p{line-height:1.65}label{display:block;margin:16px 0 6px}input:not([type=checkbox]),select,textarea{max-width:100%;width:100%;padding:10px;border:1px solid #afbddd;border-radius:8px}button:disabled{opacity:.5;cursor:default}

JavaScript

const master=document.querySelector("#all"),items=[...document.querySelectorAll(".item:not(:disabled)")],status=document.querySelector("#selection");
function sync(){const count=items.filter(item=>item.checked).length;master.checked=count===items.length&&items.length>0;master.indeterminate=count>0&&count<items.length;status.textContent=count+" of "+items.length+" selected.";}
master.addEventListener("change",()=>{items.forEach(item=>item.checked=master.checked);sync();});items.forEach(item=>item.addEventListener("change",sync));sync();

Read the complete HTML document

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root{font-family:system-ui,sans-serif;color:#18223b}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;background:#edf1ff;display:grid;place-items:center}main{width:min(100%,480px);background:white;border-radius:20px;padding:24px}h1{font-size:24px;margin:0 0 16px}button,input,select,textarea{font:inherit}button{min-height:44px;border:1px solid #afbddd;border-radius:10px;padding:10px 14px;background:#eff3ff;color:#18223b;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #3658bf;outline-offset:3px}p{line-height:1.65}label{display:block;margin:16px 0 6px}input:not([type=checkbox]),select,textarea{max-width:100%;width:100%;padding:10px;border:1px solid #afbddd;border-radius:8px}button:disabled{opacity:.5;cursor:default}
</style>
</head>
<body>
<main><h1>Choose your ingredients</h1><label><input type="checkbox" id="all"> Select all available items</label><fieldset><legend>Ingredients</legend><label><input type="checkbox" class="item" value="tomato"> Tomato</label><label><input type="checkbox" class="item" value="basil"> Basil</label><label><input type="checkbox" class="item" value="cheese"> Cheese</label><label><input type="checkbox" class="item" value="bread" disabled> Bread (unavailable)</label></fieldset><p id="selection" role="status">0 of 3 selected.</p></main>
<script>
const master=document.querySelector("#all"),items=[...document.querySelectorAll(".item:not(:disabled)")],status=document.querySelector("#selection");
function sync(){const count=items.filter(item=>item.checked).length;master.checked=count===items.length&&items.length>0;master.indeterminate=count>0&&count<items.length;status.textContent=count+" of "+items.length+" selected.";}
master.addEventListener("change",()=>{items.forEach(item=>item.checked=master.checked);sync();});items.forEach(item=>item.addEventListener("change",sync));sync();
</script>
</body>
</html>

A little guide to making it yours

Copy the code and save it in a file named example.html.
Open the file in your browser to see the complete example.
Change the text and structure in the HTML.
Adjust the colors and spacing in the CSS, or experiment in the playground.

How it works

The master control operates only on enabled items. An indeterminate master means some items are selected; selecting it checks all available items. Native labels and checkboxes retain keyboard behavior. Scope the selectors to your own group before reusing the pattern.

Historical purpose: The stage-one 2014 archive recovery verified this exact detail purpose. This is an original modern implementation; no archived third-party code, credit link, remote script or guessed numeric preview mapping is reused.

Troubleshooting and limits

The master checkbox becomes indeterminate when only some items are selected. New items must keep the item class and correct labels. This example changes local choices only; it does not submit, purchase or delete anything.

This is newly authored code. It uses system fonts and no external assets.

Keep the ideas going