✔ Namen aller gecheckten Checkboxen in Textarea speichern

P

pewpew

Grünschnabel
Hallo zusammen,

ich hab ein kleines Problem bzw. viel mehr ein kleines Anliegen an die JS Profis unter euch. :D

Ich hab einen Quelltext, der (teilweise) wie folgt aussieht

HTML: 
        <p><img src="./_MG_7907.jpg" alt="" /> <br /> <label for="_MG_7907.jpg"><input type="checkbox" name="checkbox0" id="_MG_7907.jpg"> _MG_7907.jpg</label></p>
        <p><img src="./_MG_7900.jpg" alt="" /> <br /> <label for="_MG_7900.jpg"><input type="checkbox" name="checkbox1" id="_MG_7900.jpg"> _MG_7900.jpg</label></p>
        <p><img src="./_MG_7896.jpg" alt="" /> <br /> <label for="_MG_7896.jpg"><input type="checkbox" name="checkbox2" id="_MG_7896.jpg"> _MG_7896.jpg</label></p>
        <p><img src="./_MG_7894.jpg" alt="" /> <br /> <label for="_MG_7894.jpg"><input type="checkbox" name="checkbox3" id="_MG_7894.jpg"> _MG_7894.jpg</label></p>

Das ganze variiert zwischen 200 und 600 Bildern, also es gibt keine feste Anzahl.

Nun wuerde ich dem Besucher gern die Moeglichkeit bieten, beim Durchschauen dieser Galerie, unter jedes Bild einen Haken zu setzten und spaeter, wenn alles durchgeschaut wurde, mit einem Klick auf einen Button den Namen bzw ID in eine Textarea zu speichern.

Ich habe nun 2h mit google verbracht und bekomme es einfach nicht gebacken. Wenn mir hier jemand helfen koennte ware das echt super und ich waere seeehr dankbar. :)

LG pewpew

Hier mal mein aktueller Ansatz ... aber das geht auch nicht wirklich...
HTML: 
<script type="text/javascript">
<!--
function check () {
    var element = document.getElementsByTagName('input');
    var r;
    if (element[0].checked) { var r += element[0].value; }
    if (element[1].checked) { var r += element[1].value; }
    if (element[2].checked) { var r += element[2].value; }
    alert(r);
}
 //-->
</script>

<form name="formular" action="#" onSubmit='return check()'>
    <input type='checkbox' id='check1' value='Auswahl 1'>
    <input type='checkbox' id='check2' value='Auswahl 2'>
    <input type='checkbox' id='check3' value='Auswahl 3'>
    <input type='submit' value='OK'>
</form>
 
Zuletzt bearbeitet:
So ich habe hier mal was gebastelt und es scheint zu funktionieren:

HTML: 
<script language="javascript" type="text/javascript">
function check(id) {
	if (document.getElementById(id).checked == true) {
		document.getElementById("ausgabe").innerText = document.getElementById("ausgabe").innerText + id + ", ";
	} else 	if (document.getElementById(id).checked == false) {
		teil = document.getElementById("ausgabe").innerText.split(", ");
		document.getElementById("ausgabe").innerText = "";
		for (a = 0; a < teil.length-1; a++) {
			if (document.getElementById(teil[a]).checked == true) {
				document.getElementById("ausgabe").innerText = document.getElementById("ausgabe").innerText + teil[a] + ", ";
			}
		}
	}
}
</script>
<p><img src="./_MG_7907.jpg" alt="" /><br /><label for="_MG_7907.jpg"><input type="checkbox" onclick="check(this.id);" name="checkbox0" id="_MG_7907.jpg"> _MG_7907.jpg</label></p>
<p><img src="./_MG_7900.jpg" alt="" /><br /><label for="_MG_7900.jpg"><input type="checkbox" onclick="check(this.id);" name="checkbox1" id="_MG_7900.jpg"> _MG_7900.jpg</label></p>
<p><img src="./_MG_7896.jpg" alt="" /><br /><label for="_MG_7896.jpg"><input type="checkbox" onclick="check(this.id);" name="checkbox2" id="_MG_7896.jpg"> _MG_7896.jpg</label></p>
<p><img src="./_MG_7894.jpg" alt="" /><br /><label for="_MG_7894.jpg"><input type="checkbox" onclick="check(this.id);" name="checkbox3" id="_MG_7894.jpg"> _MG_7894.jpg</label></p>
<div><textarea name="ausgabe" id="ausgabe" rows="20" cols="20"></textarea></div>

Teste du mal ob du damit klar kommst.
 
Hallo tombe,

erstmal vielen Dank fuer deine schnelle Hilfe, jedoch habe ich das ganze nun mal hochgeladen und in eine test.html gepackt, allerdings geschiet, wenn ich auf die Checkboxen klicke, nichts. Sowas aehnliches hatte ich schon via Google gefunden, dachte aber, dass es falsch programmiert sei, da es bei mir auch nicht ging. Hab es nun an 2 verschiedenen Pcs probiert, aber leider tut sich nichts. :( Eine Idee woran es liegen koennte?
 
Bin mir nicht sicher, aber es könnte an der ID selber liegen. Dürfen die Bezeichner mit Unterstrich beginnen oder muss es ein Buchstabe sein!?
 
Hab nun eben alles umbenannt, (id="MG7907jpg") daran scheint es auch nicht zu liegen.

Alert reagiert sowohl vor als auch nach deiner 4. Zeile
HTML: 
document.getElementById("ausgabe").innerText = document.getElementById("ausgabe").innerText + id + ", ";

...und auch beim unchecken kommt ein Alert sogar mit der 'id'.. Trotzdem bleibt die Textarea leider leer..
 
Zuletzt bearbeitet:
Zeig bitte nochmal deinen kompletten Code. Vielleicht hast du ja irgendwo einen Fehler drin und die eigenen findet man ja am schwersten.
 
Gern :)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="../_/css/style.css">
  </head>
  <body>
	<script language="javascript" type="text/javascript">
	function check(id) {
		if (document.getElementById(id).checked == true) {
			document.getElementById("ausgabe").innerText = document.getElementById("ausgabe").innerText + id + ", ";
		} else 	if (document.getElementById(id).checked == false) {
			teil = document.getElementById("ausgabe").innerText.split(", ");
			document.getElementById("ausgabe").innerText = "";
			for (a = 0; a < teil.length-1; a++) {
				if (document.getElementById(teil[a]).checked == true) {
					document.getElementById("ausgabe").innerText = document.getElementById("ausgabe").innerText + teil[a] + ", ";
				}
			}
		}
	}
	</script>
	<p><img src="./_MG_7907.jpg" alt="" /><br /><label for="MG7907jpg"><input type="checkbox" onclick="check(this.id);" name="checkbox0" id="MG7907jpg"> MG_7907.jpg</label></p>

	<p><img src="./_MG_7900.jpg" alt="" /><br /><label for="MG7900jpg"><input type="checkbox" onclick="check(this.id);" name="checkbox1" id="MG7900jpg"> MG_7900.jpg</label></p>
	<p><img src="./_MG_7896.jpg" alt="" /><br /><label for="MG7896jpg"><input type="checkbox" onclick="check(this.id);" name="checkbox2" id="MG7896jpg"> MG_7896.jpg</label></p>
	<p><img src="./_MG_7894.jpg" alt="" /><br /><label for="MG7894jpg"><input type="checkbox" onclick="check(this.id);" name="checkbox3" id="MG7894jpg"> MG_7894.jpg</label></p>
	<div><textarea name="ausgabe" id="ausgabe" rows="20" cols="20"></textarea></div>
  </body>

</html>
 
Es geht bei mir nur im Safari, in Firefox leider nicht (weder Win noch Mac)

Eine Idee wieso es der Firefox nicht kann?

Und noch etws ist mir aufgefallen, wenn ich eine Checkbox auswaehle, dann wird es zwar in die textarea geschrieben, jedoch immer nur 1 Wert und nicht mehrfache. War das so von dir programmiert? So wie ich den JS Code interpretier sollte doch eher der vorgegebene Wet + der neue Wert eingetragen werden?!

EDIT:
Im IE funktioniert es nahezu Perfekt.. (Hatte eben mal 2x das doppelte, aber alles in allem geht es einwandfrei). Wenn es nun im FF ginge bzw crossbrowser waere ich super gluecklich :D

EDIT2:
Waere es mit jQuery nicht sinnvoller / besser? (Davon hab ich jedoch noch weniger Ahnung)
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück