checkbox ändern

poseidonTU

Grünschnabel
Tag!

Ich hab ein kleines Skript geschrieben, dass mir, beim klick auf ein Bild eine zugehörige Checkbox ändern kann.

Sieht im Detail so aus:

ich hab ein bild mit einem onclick Handler, und eine checkbox mit einer id, etwa so:
Code:
<img src='bilder/2_0396/00.jpg' alt='' height='75' width='100' border='0' onclick="changeBox('00.jpg');return false">
<input type='Checkbox' name='bild' id='00.jpg' value='00.jpg'>

ich will also erreichen, dass die checkbox geändert wird, wenn ich auf das bild klicke. Mein Entwurf sieht so aus:

Code:
function changeBox(var element)
{
   var checkbox = document.getElementById(element);
   checkbox.checked = !checkbox.checked;
}

Interessanterweise funktioniert das Ganze im Firefox ohne Probleme, nur im IE bekomme ich sobald ich auf das Bild klicke eine "Objekt erwartet" - Fehler.

Hat irgendjemand eine Idee warum?

mfg poseideon
 
Hi,

nimm mal das var aus der Parameterliste der Funktion
Code:
function changeBox(element)
Ciao
Quaese
 
Hi,

ich bin mir nicht ganz sicher, aber ich glaube ein img-Tag darf kein onclick event enthalten.

Änder mal ab in:

HTML:
<a onclick="changeBox('idCheckbox');" style="cursor:pointer;"> <img src='pfad/zumBild/bildname.jppg" alt='' height='75' width='100' border='0' /></a>
<input type='Checkbox' name='bild' id='idCheckbox' value='00.jpg'>

Code:
function changeBox(id) {
   var checkbox = document.getElementById(id);
   if(checkbox.checked == true ) {
     checkbox.checked = false;
   }else{
     checkbox.checked = true;
   }
}
 
Bei mir funktioniert es in folgenden Browsern (System OS X)

FireFox 2.x
Safari
InetExplorer 5.2


Wenn nicht was gibt er denn für einen Fehler aus?
 
windows xp, IE 6.0

die Fehlermeldung in der Fehlerkonsole des Internet Explorers meldet "Objekt erwartet".
Es wäre ja alles so viel leichter, wenn Internet Explorer nicht einfach alles ein bisschen anders als alle anderen gängigen browser interpretieren würde. Weil in allen anderen Browsern funktioniert genau das was ich will ganz einfach mit einem <label for="id"> Tag. nur bei IE funktioniert das nur mit Text und nicht mit Bildern. Das ist echt frustrierend so viel Zeit nur wegen eines schlechten Programmes zu versch***en.

mfg
 
Hi,

sicherlich wäre ein zusammenhängendes Dokument bei der Fehleranalyse hilfreich, da es auch
bei mir problemlos funktioniert.

Der onclick-Event für das IMG-Tag ist nach SelfHTML und DTD zumindest für HTML 4.01 erlaubt.

Ciao
Quaese
 
Dein kompletter Quelltext wäre sicherlich nicht schlecht.

Allerdings läuft bei mir alles glatt unter IE 6.0 zwar unter Win2k.
Aber das sollte ja keine Rolle spielen.

gn8i
 
Ok, habe grade was herausgefunden. Ich hatte in meiner html noch ein zweite JavaScript, das beim Abschicken des Formulars aufgerufen wird. wenn ich das ganze zweite script rausnehme, funktioniert das erste plötzlich.

Ich poste anbei den Quellcode der ganzen html -- es handelt sich dabei um eine Hochzeitsliste, mit der möglichkeit Geschenke zu reservieren usw, und das ganze ist eigentlich ein php script, ich schicke jetzt nur die html ausgabe, wäre ja schon mal toll wenns da funktionieren würde. (Aus diesem Grund funktioniert das Abschicken natürlich auch nicht)

Code:
<html>
   <head>
      <title>Johanna & Arno heiraten</title>
      <link rel="stylesheet" type="text/css" href="http://stud3.tuwien.ac.at/~e0625652/test/format.css">
      <script language="JavaScript">
         //funkt in firefox problemlos, im IE nur, wenn ich die ganze Methode checkIfBooked() wegnehme. Also stimmt wahrscheinlich bei dieser was nicht
         function changeBox(element)
         {
            var checkbox = document.getElementById(element);
            checkbox.click();

         }
         function checkIfBooked()
         {
            // wenn reserviertes Geschenk gelöscht werden soll
            if(document.edit_form.booked.value != "" && document.edit_form.delete.checked == true)
            {
               if(confirm("Achtung, Geschenk ist von '" + document.edit_form.booked.value + "' reserviert! Trotzdem löschen?") == true)
                  return true;
               else
                  return false;
            }

            // wenn reserviertes Geschenk reserviert werden soll
            if(document.edit_form.booked.value != "" && document.edit_form.newbook.value != "nochange")
            {
               if(confirm("Achtung, Geschenk ist von '" + document.edit_form.booked.value + "' reserviert! Reservierung ändern?") == true)
                  return true;
               else
                  return false;
            }
         }
      </script>
   </head>
   <body>
      <div align="center"><h1>Johanna & Arno heiraten</h1></div>
      <hr width=80%>
      <table align="center" border="1" width="90%">
         <tr>
            <th></th>
            <th>Geschenk bearbeiten</th>
            <th></th>
         </tr>
         <tr>

<!-- Beginn der Menüspalte -->
            <td width="15%">
               <a href="gifts.php">Geschenkeliste</a><br>
               <a href='addgift.php'>Geschenk hinzufügen</a><br>
               <a href='edit_booking.php'>Reservierung bearbeiten</a><br>
               <a href='user.php'>Benutzerverwaltung</a><br>
               <a href="mailto:admin@johanna-arno.at">Support</a><br>
               <a href="index.php">home</a>            </td>
<!-- Beginn der Mainspalte -->
            <td width="70%">
               <form name='edit_form' method='post' action='edit.php?id=2' enctype='multipart/form-data' onsubmit='return checkIfBooked();'>
                  <input type='hidden' name='path' value='2_0396'>
                  <table>
                     <tr>
                        <td>Vollständiger Name:</td>
                        <td><input type='Text' name='name' value=''67 Shelby GT 500' size='50' maxlength='30' class='green'></td>
                     </tr>
                     <tr>
                        <td>Link (mit http://):</td>
                        <td><input type='Text' name='link' value='http://www.saac.com' size='50' maxlength='100' class='green'></td>
                     </tr>
                     <tr>
                        <td>Gibts wo?:</td>
                        <td><input type='Text' name='wheretobuy' value='fast nicht mehr' size='50' maxlength='30' class='green'></td>
                     </tr>
                     <tr>
                        <td>Preis ca:</td>
                        <td><input type='Text' name='prize' value='70000' size='50' maxlength='5' class='green'></td>
                     </tr>
                     <tr>
                        <td>Reserviert von:</td>
                        <td>
                           <input type='Text' name='booked' value='' disabled class='green'>
                           <select name='newbook' size='1' class='green'>
                              <option value='nochange'>Keine Änderung</option>
                              <option value='unbook'>Reservierung löschen</option>
                              <option value='admin'>admin (Administrator)</option>
                              <option value='user'>user (Otto Normalverbraucher)</option>
                           </select>
                        </td>
                     </tr>
                     <tr>
                        <td>Beschreibung:</td>
                        <td><textarea name='description' cols='50' rows='4'>das absolute Traumauto. Der 1967 Shelby GT 500 ist einfach der coolste aller Shelbys

7.1 Liter V8
355 PS
</textarea>
                        </td>
                     </tr>
                     <tr>
                        <td>Freigeschalten</td>
                        <td>
                           <input type='Radio' name='visible' value='1' checked> Ja<br>
                           <input type='Radio' name='visible' value='0'> Nein<br>
                        </td>
                     </tr>
                     <tr>
                        <td>Vorhandene Bilder<br>(anhaken zum Löschen)</td>
                        <td>
                           <table width=80%>
                              <tr>
                                 <td>
                                    <img src='http://stud3.tuwien.ac.at/~e0625652/test/00.jpg' alt='' height='75' width='100' border='0' onclick="changeBox('00.jpg');">
                                    <input type='Checkbox' name='bildweg[]' id='00.jpg' value='00.jpg'>
                                 </td>
                                 <td>
                                    <img src='http://stud3.tuwien.ac.at/~e0625652/test/01.jpg' alt='' height='75' width='100' border='0' onclick="changeBox('01.jpg');">
                                    <input type='Checkbox' name='bildweg[]' id='01.jpg' value='01.jpg'>
                                 </td>
                                 <td>
                                    <img src='http://stud3.tuwien.ac.at/~e0625652/test/02.jpg' alt='' height='75' width='100' border='0' onclick="changeBox('02.jpg');">
                                    <input type='Checkbox' name='bildweg[]' id='02.jpg' value='02.jpg'>
                                 </td>
                              </tr>
                              <tr>
                                 <td>
                                    <img src='http://stud3.tuwien.ac.at/~e0625652/test/03.jpg' alt='' height='75' width='100' border='0' onclick="changeBox('03.jpg');">
                                    <input type='Checkbox' name='bildweg[]' id='03.jpg' value='03.jpg'>
                                 </td>
                                 <td>
                                    <img src='http://stud3.tuwien.ac.at/~e0625652/test/04.jpg' alt='' height='75' width='100' border='0' onclick="changeBox('04.jpg');">
                                    <input type='Checkbox' name='bildweg[]' id='04.jpg' value='04.jpg'>
                                 </td>
                              </tr>
                           </table>
                        </td>
                     </tr>
                     <tr>
                        <td>Geschenk löschen</td>
                        <td><input type=Checkbox name='delete' value='true' id='delete'><label for='delete'>Geschenk komplett entfernen</label></td>
                     </tr>
                     <tr>
                        <td><input type='hidden' name='id' value='2'></td>
                        <td><input type='Submit' name='editGift' value='Eintragen'></td>
                     </tr>
                  </table>
               </form>
            </td>

<!-- Beginn der Loginspalte -->
            <td width="15%">
               Status: <b>eingeloggt</b> als 'admin'<p />
               <a href='index.php?logout=1'>ausloggen</a><br>
            </td>
      </table>
   </body>
</html>

Ich hoffe euch fällt etwas auf!

mfg Poseidon
 
Ok, habs geschafft! Danke für eure Hilfe, Leute!

Der Fehler war in folgender Zeile:

Code:
if(document.edit_form.booked.value != "" && document.edit_form.delete.checked == true)

Aus irgendeinem Grund mags der IE nicht, wenn man auf checkboxen direkt mit dem Namen zugreift - Habs abgeändert in:

Code:
if(document.edit_form.booked.value != "" && document.getElementById('delete').checked == true)

und siehe da, plötzlich funktioniert alles.

Es ist trotzdem eher seltsam, dass beim IE zwei voneinander unabhängige Methoden sich gegenseitig beeinflussen können. Weil die checkIfBooked() Methode wird erst beim Abschicken aufgerufen und dürfte somit nichts mit der changeBox() Methode zu tun haben.

Wenn irgendjemand weiß, warum ich checkboxen nicht mit dem Namen ansprechen darf, bitte sagts mir, es soll ja auch ein Lerneffekt dabei sein....;-)

Danke trotzdem nochmal

mfg Poseideon
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück