Forum: PC-Programmierung CSS-Style -> Zeige Element wenn 2 Radio-Buttons aktiv


von Jonas (Gast)


Lesenswert?

Hey zusammen,

die Anzeige eines Elements, wenn ein Radio-Button "checked" ist, ist in 
CSS kein Problem... die Frage ist, gibt es auch eine Condition wo ich 2 
Radio-Buttons abfragen kann?

die Idee ist 2 Zeilen an Radio-Buttons:
1
<input type="radio" name="con11" checked>
2
<input type="radio" name="con12">
3
<input type="radio" name="con13">  
4
5
<br>
6
7
<input type="radio" name="con21" checked>
8
<input type="radio" name="con22">
9
<input type="radio" name="con23">

und wenn richtig selektiert wurde, soll eine Bedingung erfüllt werden 
(auf Javascript möchte ich hier verzichten.

Hier ein Beispiel für den 1. Input... für Anwer
1
div.quest input#con11:checked ~ div.quest .answer {
2
    color: green;
3
}

jetzt bräuchte ich sozusagen in css ein und!?

von Jonas (Gast)


Lesenswert?

meine aktuelle Lösung sieht so aus, dass ich es eben doppelt 
verschacheln muss...

d.h. ich habe 2 Ausgabe ebenen...

N Boxen für Bedingung 1
und
N Boxen für Bedingung 2

wenn Bedingung 1 erfüllt wird, werden die ersten Boxen ausgegeben
und erst wenn Bedingung 2 erfüllt wird, wird die entsprechende Box aus 
der 2. Ebene selektiert...

richtig schön ist es nicht, aber wenn keiner eine bessere Idee hat, 
funktioniert es wenigstens :)

von Daniel A. (daniel-a)


Angehängte Dateien:

Lesenswert?

Das ~ ist einfach gleiche ebene, nachfolgendes Element. Da kann man auch 
2 Radios oder Checkboxen nehmen (siege Anhang):
1
<style>
2
#a:checked ~ #b:checked ~ #c {
3
  color: green;
4
}
5
</style>
6
<input id="a" name="r1" type="radio" checked />
7
<input name="r1" type="radio" /><br/>
8
<input id="b" name="r2" type="radio" checked />
9
<input name="r2" type="radio" />
10
<div id="c">Hello World!</div>

Ein Problem ist, wenn die Checkbox verschachtelt ist, oder man abhängig 
davon etwas vor denen anders darstellen will. Aber das kann man mit 
:has() lösen: https://developer.mozilla.org/en-US/docs/Web/CSS/:has
1
<style>
2
:root:has(#a:checked):has(#b:checked) #c {
3
  color: green;
4
}
5
</style>
6
<div id="c">Hello World!</div>
7
<label><input id="a" name="r1" type="radio" checked /> On</label>
8
<label><input name="r1" type="radio" /> Off</label><br/>
9
<label><input id="b" name="r2" type="radio" checked /> On</label>
10
<label><input name="r2" type="radio" /> Off</label>

In Firefox ist das Feature aber leider noch deaktiviert...

Es gibt auch den Workaround, <label for> zu verwenden:
1
<style>
2
input:is([type="radio"],[type="checkbox"])[id^="l-"] { display: none; }
3
label[for^="l-"]::before { content: '☐ '; }
4
#l-1-1:checked ~ main label[for="l-1-1"]::before { content: '☑ '; }
5
#l-1-2:checked ~ main label[for="l-1-2"]::before { content: '☑ '; }
6
#l-2-1:checked ~ main label[for="l-2-1"]::before { content: '☑ '; }
7
#l-2-2:checked ~ main label[for="l-2-2"]::before { content: '☑ '; }
8
9
#l-1-1:checked ~ #l-2-1:checked ~ main #c {
10
  color: green;
11
}
12
</style>
13
<input id="l-1-1" name="r1" type="radio" checked />
14
<input id="l-1-2" name="r1" type="radio" />
15
<input id="l-2-1" name="r2" type="radio" checked />
16
<input id="l-2-2" name="r2" type="radio" />
17
<main>
18
19
<div id="c">Hello World!</div>
20
<label for="l-1-1">On</label>
21
<label for="l-1-2">Off</label><br/>
22
<label for="l-2-1">On</label>
23
<label for="l-2-2">Off</label>
24
25
</main>

Da muss man halt die Reihenfolge richtig hin bekommen, und ist auch 
sonst etwas aufwendiger.

Zum Schluss, noch ein kleines Tic Tac Toe in CSS: 
https://tic-tac-toe-s.s.abrecht.li/

Edit: Ich war mir ziemlich sicher, dass HTML Anhänge mal eine Vorschau 
hatten. Aber anscheinend doch nicht (mehr?)

: Bearbeitet durch User
von Jonas (Gast)


Lesenswert?

wow, nice...
> 1000 Dank dir :)

das hat mir sehr weiter geholfen

von Jonas (Gast)


Lesenswert?

Hi,

nachdem ich hier so viel Hilfe bekommen habe, und mir das ganze super 
gut gefällt, habe ich mir gedacht ich möchte hier auch mal mich an einem 
Menü versuchen.

Die idee ist es verschiedene Tabs zu machen und entsprechend Content 
einzublenden...
Das ganze nur mit einem Button ganz entspannt.

Das funktioniert auch, wenn die radio-buttons und die der content auf 
selber Ebene liegen. Da ich das Menü aber display:fixed machen will und 
den Content Scrollbar, möchte ich die Container trennen

leider bekomme ich so die Zuweisung wieder nicht hin. Hat jemand eine 
Idee für mich?
1
<style>
2
.tab-content {
3
  color: red;
4
}
5
6
.tabs-container .tabs #tab1:checked ~ .section-container .content:nth-child(1) .tab-content,
7
.tabs-container .tabs #tab2:checked ~ .section-container .content:nth-child(2) .tab-content,
8
.tabs-container .tabs #tab3:checked ~ .section-container .content:nth-child(3) .tab-content,
9
.tabs-container .tabs #tab4:checked ~ .section-container .content:nth-child(4) .tab-content {
10
    color: green;
11
}
12
</style>
13
14
15
16
<div class="tabs-container">
17
  <div class="tabs">
18
      <input type="radio" id="tab1" name="tab-control" checked>
19
      <input type="radio" id="tab2" name="tab-control">
20
      <input type="radio" id="tab3" name="tab-control">  
21
      <input type="radio" id="tab4" name="tab-control">
22
  </div>
23
</div>
24
25
<div class="section-container">
26
  <div class="content">
27
    <section id="sec_mod_tbl0" class="tab-content">content1</section>
28
    <section id="sec_mod_tbl1" class="tab-content">content2</section>
29
    <section id="sec_mod_tbl2" class="tab-content">content3</section>
30
    <section id="sec_mod_tbl3" class="tab-content">content4</section>
31
  </div>
32
</div>

Anstelle von display: none und diesplay: block habe ich erstmal einfach 
nur farben verwendet...

Viele Grüße

von Jonas (Gast)


Lesenswert?

den Fehler mit dem NTH-Child habe ich gesehen...
natürlich muss das an der Section hängen.

Ändert aber nix

von Daniel A. (daniel-a)


Lesenswert?

Wenn man die 3 Varianten oben anschaut, Variante 1 ist in dem Fall nicht 
möglich.

Variante 2: https://jsfiddle.net/je5yhtzc/6/
Aber eben, die geht in FF noch nicht.

Variante 3: https://jsfiddle.net/je5yhtzc/7/
Ist aber etwas umständlicher.

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.