JS - Variablen in HTML mehrfach belegen, mit einer Funktion auswerten

[Rolf B]

Hallo Ammeres,

ich habe mal ein bisschen gespielt. Das Ergebnis ist wie befürchtet relativ abstrakt, aber das JavaScript ist relativ klein und die komplette Steuerlogik ergibt sich aus den aria-controls Attributen im HTML. Ich hoffe, @Gunnar Bittersmann, dass ich aria-controls korrekt anwende.

Eine aria-Attributierung brauchst Du mutmaßlich sowieso, denn ein Screenreader muss ja mitbekommen, ob Änderungen am Element A zu Änderungen des Elements B führen.

https://jsfiddle.net/Rolf_b/pry7xwn2/

Der Code verwendet Pfeilfunktionen und die for..of Schleife. Wenn Du möchtest, dass er im Internet Explorer funktioniert, musst Du das durch Alt-Konstrukte ersetzen.

Kern der Aktion ist die controlVisibility-Funktion, die eine Liste von controller-Elementen bekommt - also solche, die potenziell ein aria-controls Attribut tragen können, und alle IDs, die sie darüber findet, ein- oder ausblendet.

Angesteuert wird sie von controlVisibilityChange, die je nach Typ des Steuerelements die passenden controller-Elemente heraussucht.

Und controlVisibilityChange wird vom eigentlichen Eventhandler aufgerufen, der als Pfeilfunktion in der Registrierschleife versteckt ist.

Die Idee dabei ist, dass an den option-, Radio- und Checkbox-Elementen jeweils ein aria-controls Attribut steckt, das die IDs der Fieldsets beinhaltet, die durch dieses Element sichtbar gemacht werden.

Jedes Auswahlelement bzw. jede Auswahlgruppe bekommt eine value-source Klasse - das Script sucht sich diese heraus und registriert einen generischen Handler darauf. Generisch deshalb, weil man beim Umschalten weiter oben die Sichtbarkeit weiter unten wieder herstellen muss, basierend auf den eingestellten Werten der eingeblendeten Fieldsets, und ein generischer Handler kann das rekursiv erledigen.

Das Script setzt natürlich darauf, dass die value-source Gruppen ein standardisiertes Markup haben. D.h.

Typ Select: Die value-source Klasse sitzt auf dem Select-Element und die aria-controls Attribute auf den Option-Elementen

Typ Radio: Die value-source Klasse sitzt auf einem Container, der die Radiobuttons enthält, und die Radiobuttons haben die aria-controls Attribute

Typ Checkbox: Die value-source Klasse sitzt auf einem Container, der die Checkboxen enthält, und die Checkboxen haben die aria-controls Attribute

Für die rekursive Fortsetzung braucht man noch den showSelected-Schalter, um festlegen zu können, ob nur ausgeblendet werden soll oder auch die selektierten Folge-Fieldsets einzublenden sind.

Ich hoffe, das ist jetzt nicht weit über deiner Hutschnur...

Rolf