• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Checkboxen anhand Hidden Value anhaken

X

Xaverl

New member
Hallo,

ich möchte mittels JavaScript die Lösungen eines kleinen Quiz anzeigen können. Ich komme damit aber nicht wirklich klar. Vielleicht könnt ihr mir hier helfen... Der HTML-Quellext der Seite sieht (bereinigt) so aus:

HTML: 
<input class='inputCheckbox'  value="1" type="checkbox" name="quiz_1_loesung_1">
<input type="hidden" name="quiz_1_aw_1" value="1">
<input type="hidden" name="quiz_1_awid_1" value="34444">
<div class="answerDescription">Lösung1</div>
 
<input class='inputCheckbox'  value="1" type="checkbox" name="quiz_1_loesung_0">
<input type="hidden" name="quiz_1_aw_0" value="">
<input type="hidden" name="quiz_1_awid_0" value="34443">
<div class="answerDescription">Lösung0</div>
 
<input class='inputCheckbox'  value="1" type="checkbox" name="quiz_1_loesung_2">
<input type="hidden" name="quiz_1_aw_2" value="1">
<input type="hidden" name="quiz_1_awid_2" value="34445">
<div class="answerDescription">Lösung2</div>
<input class='inputCheckbox'  value="1" type="checkbox" name="quiz_1_loesung_3">
<input type="hidden" name="quiz_1_aw_3" value="">
<input type="hidden" name="quiz_1_awid_3" value="34446">
<div class="answerDescription">Lösung3</div>

Ich möchte den Wert von "quiz_1_aw_x" auslesen, und wenn der Wert 1 ist, die entsprechende Checkbox "quiz_1_loesung_x" anhaken lassen, mittels eines Buttons, der in eine HTML-Seite eingebaut wird. Die Quizseite würde ich in einen iFrame laden.

Hat jemand ein Beispiel, wie mir das gelingen könnte?

Vielen Dank!

Gruß,

Xaverl
 
Zuletzt bearbeitet von einem Moderator:
Ja, das hatte ich natürlich schon gesucht und auch viele Tutorials dazu gefunden. Die erklären mir aber immer nur wie ich alle Häkchen reinmache, und nicht wie ich nur genau die anhake, wo der versteckte Wert auf 1 steht.
 
Dann würde ich über alle Elemente iterieren die mit "quiz_1_aw_(\d+)" beginnen und dann im Element mit dem Namen "quiz_1_loesung_$1" checked setzen, wenn ersteres auf == "1" true liefert.
Möchtest du das in rohem JS bauen oder ein Framework wie z. B. jQuery benutzen?
 
Ich möchte den Wert von "quiz_1_aw_x" auslesen, und wenn der Wert 1 ist, die entsprechende Checkbox "quiz_1_loesung_x" anhaken lassen
Zum Vergrößern anklicken....
Das klingt nach einer ziemlich umständlichen Angelegenheit (IDs parsen um andere IDs zu finden). Vielleicht wäre es besser, sich ein weniger komplexes System zu überlegen (schließlich hat jedes Formularfeld einen Namen und einen Wert, also das HTML-Äquivalent zu einem assoziativen Array)
 
Also du meinst, beispielsweise irgendwie mit

getElementsById(wasauchimmer).value = jsonData;

ein Array erzeugen, und dann anhand dessen die Häkchen setzten?

Klingt gut, aber ich bräuchte ein kleines bißchen Starthilfe, denn das ist mein erstes Projekt in der Richtung... :)
 
Also, dann würde ich mit diesem Beispiel schon mal die Werte angezeigt bekommen, wenn ich auf den Button klicke. Zeigt aber nur ne Meldung "undefined". Was habe ich falsch gemacht?

HTML: 
<html>
<head>
<script>
function script()
{
var x=document.getElementsByTagName("quiz_1_aw_(\d+)");
alert(x.value);
}            
</script>
</head>
<body>
<iframe src="quiz.html" width="90%" height="90%" name="quiz">
</iframe>
<input type="button" onclick="script()" value="Loesung">
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
getElementsByTagName liefert nicht ein element sondern eine collection, das ist wie ein array. erkennt man an dem plural s.
 
Zuerst must du erst einmal auf den iFrame zugreifen. Das machst du in deinem Beispielcode mit
Code: 
document.getElementByTagName("iframe")[0].contentDocument
Dann würde ich über .querySelectorAll() mir alle Element mit der richtigen ID holen und dann durchiterieren. Wenn der Wert dann 1 ist, suchst du die entsprechende Checkbox und markst sie an:
Code: 
<!DOCTYPE html>
<html>
<head>
	<title>Lösung</title>
	<script>
	function script(){
		var x = document.getElementsByTagName("iframe")[0].contentDocument.querySelectorAll("[name^=quiz_1_aw_]");
		Array.prototype.slice.call(x).forEach(function(el){
			if (el.value === "1"){
				var match = /^quiz_1_aw_(\d+)/.exec(el.name);
				if (match){
					var node = el.ownerDocument.getElementsByName("quiz_1_loesung_" + match[1]);
					if (node.length){
						node[0].checked = true;
					}
				}
			}
		});
	}            
	</script>
</head>
<body>
<div class="answerDescription">Lösung3</div>
	<iframe src="quiz.html" width="90%" height="90%" name="quiz"></iframe>
	<input type="button" onclick="script()" value="Loesung">
</body>
</html>
- ungetestet.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben