JS ersetzen von Checkbox mit nem IMG

[nichtsooft]

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!

//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=0; i < inputs.length; i++) {

        //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(img, inputs[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!

[unset]

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.

[nichtsooft]

nope JS-Console bleibt leer!

[unset]

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

[nichtsooft]

hmmm ja so weit war ich schon...

Checked bleibt irgendwie als attribut bestehen!

[unset]

Mal veruscht die Funktionen aus dem Prototype-Framework zu nutzen!?

[kuddeldaddeldu]

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.

[nichtsooft]

Nööö! Aber ich hab den Fehler schon gefunden!

Wen's interessiert:

    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*

[nichtsooft]

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:

//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=0; i < inputs.length; i++) {

        //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(img, inputs[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.

[unset]

Kannst du das bitte mal irgendwo live online stellen. Das macht das rumprobieren für evtl. Helfer einfacher.

[nichtsooft]

Jupp mach ich! Werde den LINK als edit reinsetzen!

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

Und nochmal THX!

[nichtsooft]

Das gehört sich zwar garnicht aber... *push*
...hier nochmal der LINK: http://www.tswebtec.com/jstest.php

[wahsaga]

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

[nichtsooft]

MozillaFF 1.5.9.

Auswahlquelltext anzeigen:

/////////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!

[nichtsooft]

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

Sieht aktuell so aus:

 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!?