jemand anders
Erfahrenes Mitglied
Hallo,
der Anwender soll die Möglichkeit haben, aus einer Vielzahl von Möglichkeiten das auszuwählen, was ihn interessiert, wobei in jeder Checkboxreihe mindestens eine Checkbox aktiv sein muss, damit überhaupt etwas angezeigt wird.
Besteht eine Möglichkeit, das Problem rein mit CSS ohne Javascript zu lösen?
Freundl. Grüße
der Anwender soll die Möglichkeit haben, aus einer Vielzahl von Möglichkeiten das auszuwählen, was ihn interessiert, wobei in jeder Checkboxreihe mindestens eine Checkbox aktiv sein muss, damit überhaupt etwas angezeigt wird.
Besteht eine Möglichkeit, das Problem rein mit CSS ohne Javascript zu lösen?
Freundl. Grüße
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.anzeige div {
border: 1px solid #ccc;
padding: 5px;
margin: 5px;
}
/* ?????????? */
#A1[type="checkbox"]:checked
#B1[type="checkbox"]:checked
#C1[type="checkbox"]:checked
.A1.B1.C1 {
background-color: red;
}
/* ... */
</style>
</head>
<body>
<fieldset>
<legend>Auswahl:</legend>
<div>
<input type="checkbox" id="A1" name="A1" checked />
<label for="A1">A1</label>
<input type="checkbox" id="A2" name="A2" />
<label for="A2">A2</label>
<input type="checkbox" id="A3" name="A3" />
<label for="A3">A3</label>
<input type="checkbox" id="A4" name="A4" />
<label for="A4">A4</label>
</div>
<div>
<input type="checkbox" id="B1" name="B1" checked />
<label for="B1">B1</label>
<input type="checkbox" id="B2" name="B2" />
<label for="B2">B2</label>
<input type="checkbox" id="B3" name="B3" />
<label for="B3">B3</label>
</div>
<div>
<input type="checkbox" id="C1" name="C1" checked />
<label for="C1">C1</label>
<input type="checkbox" id="C2" name="C2" />
<label for="C2">C2</label>
</div>
</fieldset>
<div class="anzeige">
<p>Anzeige:</p>
<div class="A1 B1 C1">A1 B1 C1</div>
<div class="A2 B2 C2">A2 B2 C2</div>
<div class="A3 B1 C1">A3 B1 C1</div>
<div class="A1 B1 C2">A1 B1 C2</div>
<div class="A4 B3 C2">A4 B3 C2</div>
</div>
</body>
</html>
