✔ Radiobutton mit Jquery auslesen und CSS atribut setzen

[Sempervivum]

Da fehlte das document-ready, deshalb konnte das Skript nicht funktionieren.
Probiere dieses:

<script type="text/javascript">
$(document).ready(function() {
    $('input[name="antwort"]').on("click", function () {
        var color;
        if ($(this).val() == "richtig") {
        color = "green"
        $("body").append('<button id="dein_button">nächste Frage</button>');
        $("#dein_button").on("click", function() {
            var firstClicked = true;
            $('input[name="antwort"]').each(function() {
                if ($(this).val() == "falsch" && $(this).hasClass("clicked")) firstClicked = false;
            });
            if (firstClicked) {
                window.location.href='index.php?frage=2&richtig=1&falsch=0'
            } else {
                window.location.href='index.php?frage=2&richtig=0&falsch=1'
            }
        });
        } else {
            color = "red";
        }
        $(this).addClass("clicked");
        $(this).parent().parent().css("background-color", color);
    });
});
</script>

 

[Wutaler]

Okay, jetzt arbeitet das Script, aber nicht wie gewünscht.
Der Button erscheint nur wenn ich die richtige Antwort ausgewählt habe, aber nicht wenn ich vorher eine falsche angeklickt hab.
Darüber hinaus wird auch die weiterleitung bei onClick nicht unterstützt.
Kann man nicht einfach den Buttons eine ID geben und je nach dem was zutrifft dem Button auf visible schalten?

Besteht auch die Möglichkeit später dem Button zu sagen wo er erscheinen soll? Also z.B. in einem <div></div> unterhalt des Formulares ? Für den Fall das mein Gedanke mit der ID und dem Visible nicht funktioniert, sondern nur die jetzige Lösung?!


P.S. Zur vervollständigung:
Ich habe noch folgende Zeilen in das Script hinzugefügt für eine schönere Animation

$(this).parent().parent().css("background-color", color);
$(this).attr("disabled", true);
for(i = 0; i < 6; i++)
$(this).parent().parent().fadeToggle(400);

Das ganze Script schaut jetzt so aus:

$(document).ready(function() {
$('input[name="antwort"]').on("click", function () {
var color;
if ($(this).val() == "richtig") {
color = "green"
$("body").append('<button id="dein_button">nächste Frage</button>');
$("#dein_button").on("click", function() {
var firstClicked = true;
$('input[name="antwort"]').each(function() {
if ($(this).val() == "falsch" && $(this).hasClass("clicked")) firstClicked = false;
});
if (firstClicked) {
window.location.href='index.php?frage=2&richtig=1&falsch=0'
} else {
window.location.href='index.php?frage=2&richtig=0&falsch=1'
}
});
} else {
color = "red";

                    $(this).parent().parent().css("background-color", color);
                    $(this).attr("disabled", true);
                    for(i = 0; i < 6; i++)
                    $(this).parent().parent().fadeToggle(400);

}
$(this).addClass("clicked");
$(this).parent().parent().css("background-color", color);
});
});

 

[Sempervivum]

Ich dachte, dass Du es so wolltest: Nur wenn die richtige Antwort angeklickt wurde, soll der Button erscheinen.
Wenn Du die Position des Buttons festlegen willst, ist es wahrscheinlich einfacher, wenn man ihn im HTML anlegt und beim Click nur sichtbar macht, so wie Du es ursprünglich vor hattest.
Beides findest Du hier:

<script type="text/javascript">
  $(document).ready(function () {
  $('input[name="antwort"]').on("click", function () {
  var color;
  if ($(this).val() == "richtig") {
  color = "green";
  } else {
  color = "red";
  }
  $(this).addClass("clicked");
  $(this).parent().parent().css("background-color", color);
  $("#dein_button").css("display", "inline").on("click", function () {
  var firstClicked = true;
  $('input[name="antwort"]').each(function () {
  if ($(this).val() == "falsch" && $(this).hasClass("clicked")) firstClicked = false;
  });
  if (firstClicked) {
  window.location.href = 'index.php?frage=2&richtig=1&falsch=0'
  } else {
  window.location.href = 'index.php?frage=2&richtig=0&falsch=1'
  }
  });
  });
  });
</script>

(Ich kann machen was ich will, die Einrückungen verschwinden, wenn ich den Code einfüge.)
und

<button id="dein_button" style="display: none;">Nächste Frage</button>

 

[Wutaler]

Es funktioniert super, VIELEN VIELEN LIEBEN DANK! Wirklich!