Checkbox austauschen gegen Grafik

cille

cille

Erfahrenes Mitglied
Hiho,
ich hoffe Ihr könnt mir helfen.

Ich habe Checkboxen die, wenn man auf Drucken drückt gegen eine Grafik ausgetauscht werden sollen, sodass bei dem Ausgedruckten Dokument eine schicke Grafik dort ist.
Dabei werden die Checkboxen die nicht gecheckt sind ausgeblendet.

Mein Problem ist jetzt, an der Checkboxstelle eine Grafik hinzuzaubern,
hier mein Aktueller Quellcode:

Code: 
function SeiteDrucken() {
	// alle Checkboxes holen
	var checkboxes 	= document.getElementsByTagName("input");
	var images		= document.getElementsByTagName("img");

    // über alle Checkboxes iterieren
	for(var i = 0; i < checkboxes.length; ++i) {
			
			if(checkboxes[i].checked == true) 
			{ 
				checkboxes[i].style.display="none";
				images[i].style.display="block";
				
			} 
			else 
			{ 
				checkboxes[i].style.display="none"; 
			}
	}
	window.print();
	window.alert("Es Funkt");
}

Die HTML:
HTML: 
<input class="input_fields" type="radio" value="240,56" name="chkbox1" onClick="JavaScript:calculateTotal();" id="1"  />
<input id="hidden" type="hidden" value="240,56" />
<img id="1" name="chkbox1" style="display: none;" src="_images/checked.jpg" />

Die <input/> Felder selber übergeben noch einen wert um alles zusammenzurechnen,
da wo <img/> ist soll das ersetzte Bild hin.

Ich hoffe Ihr könnt mir helfen, in meinem momentanen JavaScript hab ich es schon versucht wie zu sehen ist xD.

Ich danke euch schonmal vielmals.
 
Hi,

zunächst will ich anmerken, dass IDs innerhalb eines Dokuments eindeutig sein müssen.

Wenn du schon IDs vergibst, könntest du diese auch zum Indentifizieren der zugehörigen Elemente verwenden. Dabei setzt sich die ID des Bildes aus einem Präfix und der ID der zugehörigen Checkbox bzw. des zugehörigen Radiobuttons zusammen (siehe Beispiel).

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function calculateTotal(){}

function SeiteDrucken() {
  // alle Checkboxes holen
  var checkboxes = document.getElementsByTagName("input");

  // über alle Checkboxes iterieren
  for(var i = 0; i < checkboxes.length; ++i) {
    if(checkboxes[i].checked == true){
      checkboxes[i].style.display="none";
      document.getElementById("img_"+checkboxes[i].id).style.display = "";
    }else{
      checkboxes[i].style.display="none";
    }
  }

  window.print();
  window.alert("Es Funkt");
}
</script>
</head>
<body>
<p><a href="#" onclick="SeiteDrucken(); return false;">drucken</a></p>
<input class="input_fields" type="radio" value="240,56" name="chkbox1" onclick="calculateTotal();" id="chk_1">
<input id="hidden_1" type="hidden" value="240,56">
<img id="img_chk_1" name="chkbox1" style="display: none;" src="_images/checked.jpg"><br>
<input class="input_fields" type="radio" value="250,66" name="chkbox1" onclick="calculateTotal();" id="chk_2">
<input id="hidden_2" type="hidden" value="240,56">
<img id="img_chk_2" name="chkbox1" style="display: none;" src="_images/checked.jpg">
</body>
</html>

Ciao
Quaese
 
Hiho,
ich danke Dir für Deine Antwort, es funktionier wunderbar (dickes danke),
ich habe dies berücksichtigt und versuche mich zu bessern :D.

Ich habe jetzt noch versucht eine DIV box mit einer ID mit dem namen "outercase_" erstellt, die eine fortlaufende ID hat (Gleiche ID wie checkbox).
Sozusagen, dass gleiche wie bei den Checkboxen.
Aber wenn ich:

Code: 
document.getElementById("outercase_"+checkboxes[i].id).style.display="none";

mache, führt er das Drucken nicht mehr aus :(.

Hab ich da vllt. was nicht beachtet?

Hier der div:
HTML: 
<div id="outercase_<?=$i;?>" style="display: block;"></div>

Ich würde mich freuen wenn Ihr mich aufklären könntet was ich wieder mal *grml* falsch mache :).

Sonnige Grüße und danke


PS: ich lerne im Moment ein wenig Javascript
 
Hi,

die ID des DIVs muss wie folgt lauten:
Code: 
<div id="outercase_chk_<?=$i;?>" style="display: block;"></div>

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück