Rein mit CSS lösbar?

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



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>
 

Jan-Frederik Stieler

Monsterator
Moderator
Also Du willst anhand der ausgewählten Checkboxen in .anzeige abhängig etwas bestimmtes Ausgeben?
Dafür gibt es Programmiersprachen.
Css ist dafür nicht geeignet. Eventuell bekommst Du mit :Target was hin aber das wird wohl eher Kopfschmerzen bereiten.
Genauso wenn Du willst das mind. Eine Checkbox ausgewählt sein soll. Darf und muss nur eins ausgewählt sein innerhalb einer Gruppe bin Radiobuttons.