JS ersetzen von Checkbox mit nem IMG

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • JS ersetzen von Checkbox mit nem IMG

    Ahoii ahoii!

    Habe hier ein kleines Script, dass mir Verwaltungsoberflächen schöner gestaltet. Da ja JavaScript dein/mein Freund ist, habe ich das auch hiermit realisiert.

    Das Problem ist hierbei nur:
    Wenn eine Checkbox checked ist, ist value=1. OnClick sollte jetzt allerdings der value auf 0 gesetzt werden, was leider nicht funzt!

    PHP-Code:
    //global variables that can be used by ALL the function son this page.
    var inputs;
    var 
    imgFalse 'pics/servermanager/0.gif';
    var 
    imgTrue 'pics/servermanager/1.gif';
    var 
    imgDis 'pics/servermanager/na.gif';

    //this function runs when the page is loaded, put all your other onload stuff in here too.
    function init() {
        
    replaceChecks();
    }

    function 
    replaceChecks() {
        
        
    //get all the input fields on the page
        
    inputs document.getElementsByTagName('input');

        
    //cycle trough the input fields
        
    for(var i=0inputs.lengthi++) {

            
    //check if the input is a checkbox
            
    if(inputs[i].getAttribute('type') == 'checkbox') {
                
                
    //create a new image
                
    var img document.createElement('img');
                
                
    //check if the checkbox is checked
        
    if(inputs[i].disabled) {
                      
    img.src imgDis;
        } else {
          if(
    inputs[i].checked) {
            
    img.src imgTrue;
            
    inputs[i].value '1';
          } else {
            
    img.src imgFalse;
            
    inputs[i].value '0';
          }
        }

                
    //set image ID and onclick action
                
    img.id 'checkImage'+i;
                
    //set image Align
                
    img.align 'absmiddle'
                
    //set image Border
                
    img.border '0'
                
    //set image width
                
    img.width '16'
                
    //set image height
                
    img.height '16'
                
    //set image TITLE
                
    img.title 'Ändern!'
                
    //set image style
                
    img.style.cursor 'pointer'
                
    //set image
                
    img.onclick = new Function('checkChange('+i+')');
                
    //place image in front of the checkbox
                
    inputs[i].parentNode.insertBefore(imginputs[i]);
                
                
    //hide the checkbox
                
    inputs[i].style.display='none';
            }
        }
    }

    //change the checkbox status and the replacement image
    function checkChange(i) {

     if(
    inputs[i].disabled) {

     } else {

        if(
    inputs[i].checked) {
            
    inputs[i].checked '';
            
    inputs[i].value 0;
            
    document.getElementById('checkImage'+i).src=imgFalse;
        } else {
            
    inputs[i].checked 'checked';
            
    inputs[i].value 1;
            
    document.getElementById('checkImage'+i).src=imgTrue;
        }
     }

    }
    window.onload init
    Ich bitte die Experten um Ihre Meinung!
    WHILE (!$asleep) { $sheep++; }

  • #2
    FF-JS-Konsole gibts nix aus?

    Könnte es sein, dass ein Array "inputs" innerhalb von checkChange gar nicht (mehr) existiert!?

    Edit: Vergiss die zweite Frage.
    [FONT="Helvetica"]twitter.com/unset[/FONT]

    Shitstorm Podcast – Wöchentliches Auskotzen

    Kommentar


    • #3
      nope JS-Console bleibt leer!
      WHILE (!$asleep) { $sheep++; }

      Kommentar


      • #4
        Debug dir doch mal das inputs-Array. Ansonsten STRG+A und Auswahlquelltext anzeigen. Da sieht man dann meist schon, was man selbst wieder verrafft hat
        [FONT="Helvetica"]twitter.com/unset[/FONT]

        Shitstorm Podcast – Wöchentliches Auskotzen

        Kommentar


        • #5
          hmmm ja so weit war ich schon...

          Checked bleibt irgendwie als attribut bestehen!
          WHILE (!$asleep) { $sheep++; }

          Kommentar


          • #6
            Mal veruscht die Funktionen aus dem Prototype-Framework zu nutzen!?
            [FONT="Helvetica"]twitter.com/unset[/FONT]

            Shitstorm Podcast – Wöchentliches Auskotzen

            Kommentar


            • #7
              Und was heisst funzt nicht? Wo hast Du den Value überprüft? Sieht auf den ersten Blick seltsam aus, was Du da machst. Nehmen wir mal an, jemand setzt ein Häkchen in Checkbox i. D. h. sie wird "checked". Wenn Du jetzt mit onclick diese Funktion aufrufst, setzt Du die checked-Eigenschaft ja sofort wieder auf "", nimmst also das Häkchen gleich wieder weg (und umgekehrt). Sinn?
              Ausserdem verstehe ich auch nicht, warum Du den Value verändern willst. Ist eine Checkbox nicht angekreuzt, kommt dieses Feld im $_POST-Array doch gar nicht an.

              Kommentar


              • #8
                Nööö! Aber ich hab den Fehler schon gefunden!

                Wen's interessiert:

                PHP-Code:
                    if(inputs[i].checked) {
                        
                inputs[i].checked '0';  ///// War vorhin -> inputs[i].checked = '';
                        
                inputs[i].value 0;
                        
                document.getElementById('checkImage'+i).src=imgFalse;
                    } else { 
                Mal sehn ob mir das der IE auch schluckt! *gg*
                WHILE (!$asleep) { $sheep++; }

                Kommentar


                • #9
                  Ich muss den Beitrag leider nochmal rauskramen! :-/

                  Natürlich hab ich mich mit der Tatsache, das das Ding läuft nicht zufrieden gegeben und musste weiter dran rumwerken. Leider mit dem ergebniss das jetzt garnichts mehr läuft (ja ich weiss SSKM).

                  Viel. könnt ihr nochmal ein Auge drauf werfen? Aktueller Stand:
                  PHP-Code:
                  //global variables that can be used by ALL the function son this page.
                  var inputs;
                  var 
                  imgFalse 'pics/servermanager/0.gif';
                  var 
                  imgTrue 'pics/servermanager/1.gif';
                  var 
                  imgDis 'pics/servermanager/na.gif';

                  //this function runs when the page is loaded, put all your other onload stuff in here too.
                  function init() {
                      
                  replaceChecks();
                  }

                  function 
                  replaceChecks() {
                      
                      
                  //get all the input fields on the page
                      
                  inputs document.getElementsByTagName('input');

                      
                  //cycle trough the input fields
                      
                  for(var i=0inputs.lengthi++) {

                          
                  //check if the input is a checkbox
                          
                  if(inputs[i].getAttribute('type') == 'checkbox') {
                              
                              
                  //create a new image
                              
                  var img document.createElement('img');
                              
                              
                  //check if the checkbox is checked
                              
                  if(inputs[i].disabled) {
                                    
                  img.src imgDis;
                              } else {
                                if(
                  inputs[i].checked) {
                                  
                  img.src imgTrue;
                                  
                  inputs[i].value '1';
                                } else {
                                  
                  img.src imgFalse;
                                  
                  inputs[i].value '0';
                                }
                             }

                              
                  //set image ID and onclick action
                              
                  img.id 'checkImage'+i;
                              
                  //set image Align
                              
                  img.align 'absmiddle'
                              
                  //set image Border
                              
                  img.border '0'
                              
                  //set image width
                              
                  img.width '16'
                              
                  //set image height
                              
                  img.height '16'
                              
                  //set image TITLE
                              
                  img.title 'Ändern!'
                              
                  //set image style
                              
                  img.style.cursor 'pointer'
                              
                  //set image
                              
                  img.onclick = new Function('checkChange('+i+')');
                              
                  //place image in front of the checkbox
                              
                  inputs[i].parentNode.insertBefore(imginputs[i]);
                              
                              
                  //hide the checkbox
                              
                  inputs[i].style.display='none';
                          }
                      }
                  }

                  //change the checkbox status and the replacement image

                  function checkChange(i) {

                   if(
                  inputs[i].disabled) {
                   } else {
                      if(
                  inputs[i].checked) {
                        
                  inputs[i].value '0';
                        
                  inputs[i].checked 'false';
                        
                  document.getElementById('checkImage'+i).src=imgFalse;
                      } else {
                        
                  inputs[i].value '1';
                        
                  inputs[i].checked 'true';
                        
                  document.getElementById('checkImage'+i).src=imgTrue;
                      }
                   }
                  }


                  window.onload init
                  Fehlerbeschreibung:
                  OnClick funzt nur 1x (sollte natürlich immer laufen).
                  FF JSConsole bringt keine Fehler.
                  Auswahlquelltext zeigt auch keine unregelmäßigkeiten.
                  WHILE (!$asleep) { $sheep++; }

                  Kommentar


                  • #10
                    Kannst du das bitte mal irgendwo live online stellen. Das macht das rumprobieren für evtl. Helfer einfacher.
                    [FONT="Helvetica"]twitter.com/unset[/FONT]

                    Shitstorm Podcast – Wöchentliches Auskotzen

                    Kommentar


                    • #11
                      Jupp mach ich! Werde den LINK als edit reinsetzen!

                      EDIT: Sooo wie versprochen: http://www.tswebtec.com/jstest.php

                      Und nochmal THX!
                      Zuletzt geändert von nichtsooft; 23.02.2007, 15:54.
                      WHILE (!$asleep) { $sheep++; }

                      Kommentar


                      • #12
                        Das gehört sich zwar garnicht aber... *push*
                        ...hier nochmal der LINK: http://www.tswebtec.com/jstest.php
                        WHILE (!$asleep) { $sheep++; }

                        Kommentar


                        • #13
                          Original geschrieben von nichtsooft
                          Das gehört sich zwar garnicht aber... *push*
                          Nächstes Mal: *trash*


                          Woraus ziehst du eigentlich den Schluss, dass der Value der Checkbox nicht geändert würde?

                          Ein simples alert(inputs[i].parentNode.innerHTML); am Anfang und Ende der Funktion checkChange eingebaut zeigt doch das Gegenteil ...
                          I don't believe in rebirth. Actually, I never did in my whole lives.

                          Kommentar


                          • #14
                            MozillaFF 1.5.9.

                            Auswahlquelltext anzeigen:
                            PHP-Code:
                            /////////VOR DEM KLICK:
                            .....6"><input value="1" name="perm......
                            /////////NACH DEM KLICK:
                            .....16"><input value="0" name="permi[..... 
                            Value wechselt bei mir.

                            Edit:
                            kk also irgendwie schlägt der Wechsel fehl sobald value="0" gesetzt ist. Ist Value von Beginn weg '0' lässt er sich 1x verändern und auch ein mal rücksetzten, danach ist aber Schicht im Schacht!
                            Zuletzt geändert von nichtsooft; 23.02.2007, 19:03.
                            WHILE (!$asleep) { $sheep++; }

                            Kommentar


                            • #15
                              Was mich ein wenig stutzig macht ist die Reihenfolge in der value und checked geändert wird!

                              Sieht aktuell so aus:
                              PHP-Code:
                               if(inputs[i].disabled) {
                               } else {
                                  if(
                              inputs[i].checked) {
                                    
                              inputs[i].value '0';
                                    
                              inputs[i].checked '0';
                                    
                              document.getElementById('checkImage'+i).src=imgFalse;
                                  } else {
                                    
                              inputs[i].value '1';
                                    
                              inputs[i].checked 'checked';
                                    
                              document.getElementById('checkImage'+i).src=imgTrue;
                                  }
                               } 
                              wobei ich dazusagen muss ich bin mir bei inputs[i].checked = '??'; nicht sicher ob ich die richtigen anweisungen verwende (true/false, 0/1, oder so)!

                              Eventuell das der Fehler da angesiedelt ist!?
                              WHILE (!$asleep) { $sheep++; }

                              Kommentar

                              Lädt...
                              X