JavaScript Adobe PDF Aktionen - Probleme bei Umschalten von Checkboxes

[Sturmflut92]

Hallo,

ich brauche dringend Hilfe. Ich bin blutiger Anfänger was JavaScript angeht und muss gerade eine PDF "programmieren" und komme nicht weiter. Ich mache das ganze mit Adobe Actobat Pro DC. Ich versuche euch alles was ich gemacht habe und was ich erzielen möchte darzustellen.

Es geht um ein Formular, bei dem Inhalte abhängig davon angezeigt werden, welche von zwei Checkboxen angeklickt werden. So sieht das Formular aus sofern keine Checkbox ausgewählt wurde:

Bild 1

Im nächsten Bild kann man alle relevanten Felder sehen.
Die zwei Checkboxes VJ und Schnittvertiefung, haben den selben Feldnamen haben aber verschiedene Exportwerte, damit nur eine von beiden checked sein kann (ich hatte Radio-Buttons aber damit hat mein JavaScript nicht funktioniert, was ich im Folgenden noch aufführe).
Die Felder auf der Tabelle sind Schaltflächen, die vom Layout her "nur Symbol" sind, also keine Schaltflächenfunktion haben. Aber das war die einzige Möglichkeit um ein Bild als Formularfeld einzufügen.

Bild 2

Die Verteilung der Schaltflächen-Felder auf die jeweiligen Checkboxes sind wie folgt:

Bild 3

So muss es für "VJ" aussehen:

Bild 4

So muss es für "Schnittvertiefung" aussehen:

Bild 5


Mit folgendem JavaScript Aktionen der Checkboxen habe dieses Ziel fast erreicht:


Der Checkbox VJ "Check#1" eine Aktion hinzugefügt - bei "Maustaste loslassen" ein "JavaScript ausführen":

var fieldHide = event.target.isBoxChecked (0) ?display.visible:display.hidden;

this.getField("1VJ").display = fieldHide;

this.getField("2VJ").display = fieldHide;

this.getField("3VJ").display = fieldHide;

this.getField("4VJ").display = fieldHide;

this.getField("5VJ").display = fieldHide;

this.getField("6VJ").display = fieldHide;


Der Checkbox Schnittvertiefung "Check#2" eine Aktion hinzugefügt - bei "Maustaste loslassen" ein "JavaScript ausführen":

var fieldHide = event.target.isBoxChecked (1) ?display.visible:display.hidden;

this.getField("1VJ").display = fieldHide;

this.getField("2VT").display = fieldHide;

this.getField("3VJ").display = fieldHide;

this.getField("4VJ").display = fieldHide;

this.getField("5VJ").display = fieldHide;

this.getField("6VJ").display = fieldHide;

this.getField("7VT").display = fieldHide;

this.getField("8VT").display = fieldHide;


Das Problem ist jetzt allerdings, dass das Ganze nur funktioniert sofern man ein Häkchen setzt und dann wieder extra entfernt bevor man den anderen Kasten anhakt.
Ist eine Checkbox abgehakt und wird direkt die andere angeklickt, entfernt sich (wechselt) zwar das Häkchen den Kasten, aber die Felder werden nicht wieder verborgen und so überlappen sich dann die Inhalte.
Die Felder von nicht extra wieder enthakten Checkboxen bleiben stehen.

Hakt man etwa "VJ" an und wechselt dann auf "Schnittvertiefung", dann überlappen sich alle Felder:


Bild 6


Wechselt man jetzt wieder auf "VJ" hat man weiterhin alle Felder überlappend. Enthakt man nun das "VJ" bleiben nun noch die drei Felder der Schnittvertiefung (this.getField("2VT").display = fieldHide; this.getField("7VT").display = fieldHide; this.getField("8VT").display = fieldHide; ) stehen, die nicht in den Befehlen von der Checkbox VJ (s.o.) hinterlegt sind:

Bild 7


Um wieder auf eine Blankotabelle zu kommen muss man hier also nochmal den Haken bei "Schnittvertiefung" setzen und entfernen.


Was kann ich tun? Wie muss ich die Befehle anpassen? Ich hab schon so viel ausprobiert und habe viel zu wenig Kenntnisse, um eine Lösung zu finden.
Ich brauche einen Befehl der bewirkt, dass wenn bereits ein Haken gesetzt ist und dann direkt ein anderer Haken gesetzt wird, die Checkbox deaktiviert wird und die Felder wieder verborgen werden ?!?

Ich hab jetzt ewig an diesem Eintrag geschrieben und kann grad nicht nochmal überarbeiten. Ich hoffe er ist einigermaßen verständlich. Wenn nicht, dann schreibt mir bitte wo ich verkackt hab und was unklar ist, damit ich das nochmal Umformulieren/Erklären kann.

Ganz liebe Grüße!

 

[NPC]

Ist eine Checkbox abgehakt und wird direkt die andere angeklickt, entfernt sich (wechselt) zwar das Häkchen den Kasten, aber die Felder werden nicht wieder verborgen und so überlappen sich dann die Inhalte.
Die Felder von nicht extra wieder enthakten Checkboxen bleiben stehen.

Wie wäre es damit:

wenn eine Checkbox angeklickt wird
dann
- alle Checkboxen leeren
- Ergebis-Ausgabe ("Ausspielungen") leeren
- angeklickte Checkbox anhaken
- Ergebis-Ausgabe für angeklickte Checkbox zeigen


Beispiel:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>
    Checkbox 1: <input class="checkbox" type="checkbox" id="1">
    <br>
    Checkbox 2: <input class="checkbox" type="checkbox" id="2">
    <br><br>
    Result:
    <div id="result"></div>
</div>
</body>
<footer>
    <script>
        // Alle Checkboxen als Array
        const checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]'));

        // Diese Funktion wird beim Seitenaufruf automatisch gestartet
        (function () {
            // löscht vorherige Checkboxen, wenn Seite refreshed wurde
            uncheckAllCheckboxes();

            // "click"-eventListener für Checkboxen
            document.addEventListener('click', function (e) {
                if (e.target.className === 'checkbox') {
                    someAction(e.target);
                }
            });
        })();

        function someAction(target) {
            changeResultText();

            if (target.checked) {
                toggleCheckboxes(target);
                someLogic(target);
            }
        }

        // Text in #result ändern
        function changeResultText(text) {
            document.getElementById('result').innerText = text === undefined ? "" : text;
        }

        // Alle Checkboxen leeren
        function uncheckAllCheckboxes() {
            checkboxes.map((checkbox) => checkbox.checked = false);
        }

        // Checkboxen mit "Radio-Button"-Verhalten
        function toggleCheckboxes(target) {
            uncheckAllCheckboxes();
            target.checked = true;
        }

        function someLogic(target) {
            // 'target.id' ist Sting
            if (target.id === '1') {
                changeResultText('Checkbox one.');
            }

            if (target.id === '2') {
                changeResultText('Checkbox two.');
            }
        }
    </script>
</footer>
</html>