RadioButton per JS aktivieren: Logikfehler?

[tklustig]

Hallo Leute,
folgender Code soll über JS erwirken, dass immer derjenige Radiobutton nach dem Request aktiviert bleibt, der bereits aktivert war. Macht der Code aber nicht. Der aktivert immer nur den letzten der Beiden. Wo liegt der Fehler? Wie geht's richtig?

    <form action="<?= htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
        <center>
            <div id="dropdown">
                <?php
                require_once 'inc/anzeigen.php';
                echo auswahlStep(48, 48, 500);
                ?>
            </div>
            <div id="submitDropDown">
                <label>DropDown</label>
                <input class="button3" type="submit" name="submit0" value="Submit">
            </div>
            <div>
                <input type="radio" name="rad" id="active1" value="frontOf">vor
                <input type="radio" name="rad" id="active2" value="back">zurück
            </div>
            <br>
        </center>
        <script>
            if (document.getElementById('active1').checked == false) {
                document.getElementById('active2').checked = true;
                alert("Activated RB2");
            } else if (document.getElementById('active2').checked == false) {
                document.getElementById('active1').checked = true;
                alert("Activated RB1");
            }
        </script>
    </form>

 

[tklustig]

also in etwa so:

$(document).ready(function() {
        
    restoreContents();
    
    $('#edit').bind('click', toggleEditContent);
    $('#clear').bind('click', resetContent);
    
    function saveContents() {
        var rbIsClicked = $('#rbIsClicked').html();
        localStorage['rbIsClicked'] = rbIsClicked;
    }
    
    function restoreContents() {
        var myrbIsClicked = localStorage['rbIsClicked'];
        if (myrbIsClicked != undefined) {
            $('#rbIsClicked').html(myrbIsClicked);
        }
    }
    
    function toggleEditContent(e) {
        if ($('#rbIsClicked').attr('contenteditable') == 'false') {
            $('#rbIsClicked').attr('contenteditable', 'true');
            $('#edit').val('Speichern');
            $('#rbIsClicked').focus();
        } else {
            $('#rbIsClicked').attr('contenteditable', 'false');
            $('#edit').val('Bearbeiten');
            saveContents();
        }
    }
    
    function resetContent(e) {
        localStorage.clear();
        window.location.reload();
    }   
});

 

[Sempervivum]

Hast Du das getestet? Einiges leuchtet mir nämlich nicht ein.
Ich stelle mir das Speichern und Einlesen eher so vor:

        function saveContents() {
            var rbIsClicked = $("input[type='radio'][name='rad']:checked");
            if (rbIsClicked.length != 0) localStorage['rbIsClicked'] = rbIsClicked.attr("id");
        }
        function restoreContents() {
            var rbIsClicked = localStorage['rbIsClicked'];
            if (rbIsClicked != undefined) {
                $('#' + rbIsClicked).attr('checked', true);
            }
        }
        $("input[type='radio'][name='rad']").on("change", saveContents);
        restoreContents();

 

[tklustig]

Na ja, damit wollte ich eigentlich nur das Prinzip von Local Storages aufzeigen, ohne direkt den Kontext auf die Radio Buttons zu legen. Im übrigen habe ich mich dafür entschieden, Deine local Storage Lösung zu nehmen, da sie meinem Grundverständnis entspricht: PHP ist für den Server zuständig, JS für den Client

 <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
.
.
<div>
  <input type="radio" name="rad" id="dummy1" value="frontOf">vor
  <input type="radio" name="rad" id="dummy2" value="back">zurück
</div>
.
.
<script>
        function saveContents() {
            var rbIsClicked = $("input[type='radio'][name='rad']:checked");
            if (rbIsClicked.length != 0)
                localStorage['rbIsClicked'] = rbIsClicked.attr("id");
        }
        function restoreContents() {
            var rbIsClicked = localStorage['rbIsClicked'];
            if (rbIsClicked != undefined) {
                $('#' + rbIsClicked).attr('checked', true);
            }
        }
        $("input[type='radio'][name='rad']").on("change", saveContents);
        restoreContents();
</script>