Beispiel:HTML input-Element9.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Checkboxen mit :checked und :indeterminate</title> <style>
input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
font-weight: bold; color: darkred;
} input:indeterminate + label {
color: orange; font-style: italic;
} fieldset { padding: 1em; margin-block: 2em; border:none; } legend { font-size: 1.1em;
font-weight: bold;
border: thin solid; border-radius: 0.5em; padding-inline: 0.5em; background: white; } input { margin-right: 1em; }
label::after { content: ""; display: block; }
body { background-image: linear-gradient(135deg, red 20%, white 25%, white 75%, green 79%); background-repeat: no-repeat; height: 100vh; margin: 0; }
h1,p, form { width: 25em; margin: 0 auto; }
h1 { padding: 1em 0; text-align:center; }
</style> </head> <body>
Wähl dir deine Pizza 🍕
(Checkboxen mit :checked und :indeterminate)
<form> <fieldset>
<legend>Boden</legend> <input type="radio" id="wh" name="Boden" value="Weizen" checked> <label for="wh">Weizen</label>
<input type="radio" id="wm" name="Boden" value="Vollkorn"> <label for="wm">Vollkorn</label>
<input type="radio" id="dinkel" name="Boden" value="Dinkel"> <label for="dinkel">Dinkel</label>
</fieldset>
<fieldset>
<legend>Zutaten</legend> <input type="checkbox" id="all"> <label for="all">Alle Zutaten auswählen</label>
<input type="checkbox" name="zutat" value="Käse" id="check1" checked> <label for="check1">Käse</label>
<input type="checkbox" name="zutat" value="Schinken" id="check2"> <label for="check2">Schinken</label>
<input type="checkbox" name="zutat" value="Salami" id="check3"> <label for="check3">Salami</label>
<input type="checkbox" name="zutat" value="Oliven" id="check4"> <label for="check4">Oliven</label>
<input type="checkbox" name="zutat" value="Paprika" id="check5"> <label for="check5">Paprika</label>
<input type="checkbox" name="zutat" value="Pilze" id="check6"> <label for="check6">Pilze</label>
</fieldset> </form> <script> // Checkboxen holen const all = document.getElementById('all'); const toppings = document.querySelectorAll('input[name="zutat"]');
// "Alle auswählen" steuert die Zutaten all.addEventListener('change', () => {
toppings.forEach(t => t.checked = all.checked);
});
// Zutaten-Status ändert "Alle auswählen" function updateAll() {
const checked = [...toppings].filter(t => t.checked);
if (checked.length === 0) {
all.checked = false;
all.indeterminate = false;
} else if (checked.length === toppings.length) {
all.checked = true;
all.indeterminate = false;
} else {
all.checked = false;
all.indeterminate = true;
}
} toppings.forEach(t => t.addEventListener('change', updateAll)); updateAll(); // Initial setzen </script>
</body> </html>
