checkbox mal anders

kingluui

Intermediate

Posts: 81

Tuesday, May 20th 2008, 3:37pm

checkbox mal anders

Hallo liebes Team,

ich möchte nochmal auf eure Hilfe zurückgreifen, ich habe in einer Tabelle untereinander drei checkboxen mit jeweils daneben einem Bild, wenn ich auf ein Bild klicke, dann soll die checkbox den value checked bzw. 1 annehmen, ich habe auch hier wieder etwas vorgefertigt, es funktioniert aber nicht:

Source code

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<form id="formcheckboxes" name="formcheckboxes" method="post" action="multi.php"> 
<tr> 
<td><img src="dark_green.gif" width="16" height="16" onclick="document.getElementById('checkbox1').value='1';" /> 
<input type="checkbox" name="checkbox[1]" id="checkbox1" value="" /> 
</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><img src="green.gif" width="16" height="16" onclick="document.getElementById('checkbox2').value='1';" /> 
<input type="checkbox" name="checkbox[2]" id="checkbox2" value="" /> 
</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><img src="green.gif" width="16" height="16" onclick="document.getElementById('checkbox3').value='1';" /> 
<input type="checkbox" name="checkbox[3]" id="checkbox3" value="" /> 
</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><input type="submit" name="button" id="button" value="Senden" /></td> 
<td>&nbsp;</td> 
</tr> 
</form> 
</table>

Analog dazu müsste es dann auch mit hidden fields funktionieren oder?

MfG

kingluui

dynambee

Professional

Posts: 291

Tuesday, May 20th 2008, 3:51pm

Bei Checkboxen müsste es damit funktionieren:

HTML Code

<img src="green.gif" width="16" height="16" onclick="document.getElementById('checkboxID').checked = true;" />

Bei unsichtbaren Felder kannst du ohne Probleme mit value arbeiten.

kingluui

Intermediate

Posts: 81

Tuesday, May 20th 2008, 4:39pm

Super danke,

ich habe es dann nach Deinem Tipp so gemacht:

Source code

<table width="100%" border="0" cellspacing="0" cellpadding="0">
      <form id="formcheckboxes" name="formcheckboxes" method="post" action="multi.php">
  <tr>
    <td><img src="green.gif" width="16" height="16" onmouseover="this.style.cursor='hand';" onclick="if(document.getElementById('checkbox1').checked == true){document.getElementById('checkbox1').checked = false;}else{document.getElementById('checkbox1').checked = true;}" />
        <input type="checkbox" name="checkbox[1]" id="checkbox1" value="1" />
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><img src="green.gif" width="16" height="16" onmouseover="this.style.cursor='hand';" onclick="if(document.getElementById('checkbox2').checked == true){document.getElementById('checkbox2').checked = false;}else{document.getElementById('checkbox2').checked = true;}" />
        <input type="checkbox" name="checkbox[2]" id="checkbox2" value="2" />
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><img src="green.gif" width="16" height="16" onmouseover="this.style.cursor='hand';" onclick="if(document.getElementById('checkbox3').checked == true){document.getElementById('checkbox3').checked = false;}else{document.getElementById('checkbox3').checked = true;}" />
        <input type="checkbox" name="checkbox[3]" id="checkbox3" value="3" />
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input type="submit" name="button" id="button" value="Senden" /></td>
    <td>&nbsp;</td>
  </tr>
      </form>
</table>

... mit wieder ausschalten, hast Du eine Ahnung wie ich auch das Bild ändern kann? Also z.B green.gif für Standard und wenn das Value true ist red.gif?

Das müsste irgendwie mit document.getElementById('checkboxID').style.???.??? oder so gehen, oder?

MfG

kingluui

dynambee

Professional

Posts: 291

Tuesday, May 20th 2008, 5:11pm

Probiers mal damit. Ich bin aber etwas eingerostet in Sachen JavaScript...

JavaScript Code

function changeElem(obj, elem) {
	e = document.getElementById(elem);
	if (e.checked == true) {
		e.checked = false;
		obj.src = 'red.gif';
	} else { 
		e.checked = true;
		obj.src = 'green.gif';
	}
}

HTML Code

<img src="green.gif" width="16" height="16" onmouseover="this.style.cursor='hand';" onclick="changeElem(this, 'checkboxID')" />

kingluui

Intermediate

Posts: 81

Tuesday, May 20th 2008, 9:48pm

Danke nochmal für die schnellen Antworten, ich habe das dann mal so versucht, das Bild wechselt dann einmal nach Rot aber es wird nicht die checkbox markiert, und bei nochmaligem Klick auf Bild wechselt es nicht mehr zurück nach Grün und unmarkiert geht dann natürlich folglich auch nicht mehr, schliesslich wurde es ja auch nicht markiert.

Source code

<img src="green.gif" width="16" height="16" onmouseover="this.style.cursor='hand';" onclick="if(document.getElementById('checkbox3').checked == true){ 
document.getElementById('checkbox3').checked = false;changeElem(this, 'checkbox3'); 
}else{ 
document.getElementById('checkbox3').checked = true;changeElem(this, 'checkbox3'); 
}" /> 
<input type="checkbox" name="checkboxgo[3]" id="checkbox3" value="3" />

Ohne Zeilenumbrüche versteht sich!

MfG

kingluui

Torben Brodt

Administrator

Posts: 8,454

Tuesday, May 20th 2008, 10:14pm

einfach den code von dynambee übernehmen. Der ist schon komplett.

HTML Code

1
2

<img src="green.gif" width="16" height="16" onmouseover="this.style.cursor='hand';" onclick="changeElem(this, 'checkbox3')" />
<input type="checkbox" name="checkboxgo[3]" id="checkbox3" value="3" />

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

kingluui

Intermediate

Posts: 81

Tuesday, May 20th 2008, 11:14pm

Menno,

schon wieder vor lauter Bäumen den Wald nicht gesehn, natürlich ist die Funktion schon fertig, ich habs nicht bemerkt, sorry.

Und danke nochmal Ihr lieben. Es funktioniert.

MfG

kingluui