checkbox mal anders

  • 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:

    Quellcode

    1. <table width="100%" border="0" cellspacing="0" cellpadding="0">
    2. <form id="formcheckboxes" name="formcheckboxes" method="post" action="multi.php">
    3. <tr>
    4. <td><img src="dark_green.gif" width="16" height="16" onclick="document.getElementById('checkbox1').value='1';" />
    5. <input type="checkbox" name="checkbox[1]" id="checkbox1" value="" />
    6. </td>
    7. <td>&nbsp;</td>
    8. </tr>
    9. <tr>
    10. <td><img src="green.gif" width="16" height="16" onclick="document.getElementById('checkbox2').value='1';" />
    11. <input type="checkbox" name="checkbox[2]" id="checkbox2" value="" />
    12. </td>
    13. <td>&nbsp;</td>
    14. </tr>
    15. <tr>
    16. <td><img src="green.gif" width="16" height="16" onclick="document.getElementById('checkbox3').value='1';" />
    17. <input type="checkbox" name="checkbox[3]" id="checkbox3" value="" />
    18. </td>
    19. <td>&nbsp;</td>
    20. </tr>
    21. <tr>
    22. <td><input type="submit" name="button" id="button" value="Senden" /></td>
    23. <td>&nbsp;</td>
    24. </tr>
    25. </form>
    26. </table>
    Alles anzeigen


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

    MfG

    kingluui
    Man muss nicht wissen wie es geht, man muss nur wissen wo es steht! Natürlich bei easy-coding 8o de

  • Super danke,

    ich habe es dann nach Deinem Tipp so gemacht:

    Quellcode

    1. <table width="100%" border="0" cellspacing="0" cellpadding="0">
    2. <form id="formcheckboxes" name="formcheckboxes" method="post" action="multi.php">
    3. <tr>
    4. <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;}" />
    5. <input type="checkbox" name="checkbox[1]" id="checkbox1" value="1" />
    6. </td>
    7. <td>&nbsp;</td>
    8. </tr>
    9. <tr>
    10. <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;}" />
    11. <input type="checkbox" name="checkbox[2]" id="checkbox2" value="2" />
    12. </td>
    13. <td>&nbsp;</td>
    14. </tr>
    15. <tr>
    16. <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;}" />
    17. <input type="checkbox" name="checkbox[3]" id="checkbox3" value="3" />
    18. </td>
    19. <td>&nbsp;</td>
    20. </tr>
    21. <tr>
    22. <td><input type="submit" name="button" id="button" value="Senden" /></td>
    23. <td>&nbsp;</td>
    24. </tr>
    25. </form>
    26. </table>
    Alles anzeigen


    ... 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
    Man muss nicht wissen wie es geht, man muss nur wissen wo es steht! Natürlich bei easy-coding 8o de

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

    Quellcode

    1. function changeElem(obj, elem) {
    2. e = document.getElementById(elem);
    3. if (e.checked == true) {
    4. e.checked = false;
    5. obj.src = 'red.gif';
    6. } else {
    7. e.checked = true;
    8. obj.src = 'green.gif';
    9. }
    10. }


    Quellcode

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

  • 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.

    Quellcode

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


    Ohne Zeilenumbrüche versteht sich!

    MfG



    kingluui
    Man muss nicht wissen wie es geht, man muss nur wissen wo es steht! Natürlich bei easy-coding 8o de