✔ eigene checkbox

[jan]

Hallo

also ich bin bei JavaScript noch zu 100% anfänger
aber hab mir mal durch langes testen diesen Script gebaut
der natürlich nicht funktioniert (

var status = 0;
function checkbox(bild,fn,ms){
if(status==0){ status=1;
document.getElementById(fn).getElementById(ms).value= "1";
document.getElementById(bild + '1').style.display = 'none';
document.getElementById(bild + '2').style.display = '';
} else {  status=0;
document.getElementById(fn).getElementById(ms).value = "0";
document.getElementById(bild + '1').style.display = '';
document.getElementById(bild + '2').style.display = 'none'; } }

Also meine idee war ebend ne bild das bei klick sich ändert
und dann die Variable sich in eine "unsichbaren" input setzt.
Aber das geht net?

Funktioniert das auch das ich dem JavaScript sage er soll beim submit
die variable status mitgibt ?

kann man das ganze irgend wie realiesieren? weil diese blö... Checkbox
nervt mich! )

DAnke Danke Danke....

gruss Jan

Ok @zeromancer Dachte der script oben reicht.... hier der rest...

<form action="?..." method="post" name="pd">
...
<input type="text" name="ms" style="width:0px" class="ubox">
...
<a href="javascript:checkbox('mails','pd','ms')">
<img id="mails1" name="mails1" src="img/checkbox_01.gif" border="0"></a>
<a href="javascript:checkbox('mails','pd','ms')"><img id="mails2" name="mails2" style="display: none;" src="img/checkbox_02.gif" border="0"></a>
...
</form>

Und der Fehler war blaaa Eigenschaften oder Methode wir nicht unterstützt und der ist aufgetaucht als ich die Variable ms und getElementById(ms) hinzugefügt habe.

Meine Frage war aber auch ob es nicht eine einfachere Mehtode gibt um das zu realiesieren .... ?

 

[zeromancer]

Wäre gut, wenn Du Deine Frage präzisieren würdest:

WAS funktioniert nicht?
WIE sieht der HMTL Code für Deine Checkbox aus?

Das Script an sich sieht gar nicht mal falsch aus, nur kann keiner was mit Deinen Objekten anfangen, wenn man nicht sieht, in welchem Kontext sie in Deiner Seite stehen...

 

[Sven Mintel]

Der Fehler ist eigentlich nur, dass du das Formularfeld "ms"falsch ansprichst.
Du könntest es z.B. mit

document.getElementsByName(ms)[0]

ansprechen... empfehlenswerter ist aber

document.forms[fn].elements[ms]

...weil es von weitaus mehr Browsern verstanden wird.
Dass die Variable weitergegeben wird, funktioniert auch....du speicherst sie ja in "ms"....und da "ms" ein Formularfeld ist,wird es beim Senden auch übergeben.
Übrigens:in HTML-Sprachumfang sind "echte" versteckte Formularfelder enthalten

<input type="hidden">

Stichwort Browser-Kompatibilität:
das Ändern der "display"-Eigenschaft ist ebenfalls nur in einer eingeschränkten Zahl von Browsern möglich.... und eigentlich brauchst du es garnicht, du benötigst ja nur eine Checkbox...welche ihren Zustand ändert.
Da wäre das Sinnvollste, lediglich das Bild auszutauschen... das spart sogar noch die Hälfte vom Code
Mit allem angesprochenen könntest du es z.B.so machen:

<script type="text/javascript">
<!--
boxes=new Array('img/checkbox_02.gif','img/checkbox_01.gif');
function checkbox(bild,fn,ms)
{
x=document.forms[fn].elements[ms].value;
document.images[bild].src=boxes[x];
if(x==0){x=1;}else{x=0;}
document.forms[fn].elements[ms].value=x;
}
//-->
</script>
<!-- ...... -->
<form action="#" method="post" name="pd">
<input type="hidden" name="ms"class="ubox"value="0">
<a href="#"onclick="checkbox('mails','pd','ms');return false;">
<img name="mails"src="img/checkbox_01.gif" border="0"></a>
</form>

 

[jan]

Danke

Super Danke an den PBerg gruss aus fHain

muss mal kucken, bau denn mal noch so um das es auch mit "radio"
funktzioniert ....

auf jeden Fall Danke

 

[robinK]

Hallo fatalus,
hab dein Script mal eingebaut. Es funktioniert sehr gut.
Nur wie muß ich das machen, wenn ich mehrere boxen habe?
So ist das Script ja nur für eine box.

hier mal der code bisher:

<script language="JavaScript">

boxes=new Array('images/checkbox1.gif','images/checkbox0.gif');
function checkbox(bild,pd,ms)
{
x=document.forms[pd].elements[ms].value;
document.images[bild].src=boxes[x];
if(x==0){x=1;}else{x=0;}
document.forms[pd].elements[ms].value=x;
}


// Beim klicken auf Link, setzen der Checkbox
function changeBox(cbox) {
box = eval(cbox);
box.checked = !box.checked;}

</script>
</head>

<body  bgcolor=#FFFFFF leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 >
<form name="pd" method="post" action="">
    
<input type="hidden" name="ms" value="0" class=checkbox>
<a href="#"onclick="checkbox('mails','pd','ms');return false;"><img name="mails"src="images/checkbox0.gif" border="0"></a>
<a onClick="changeBox('document.pd.ms');return false" href="#" class=tab-content>Aerobic</a><br>

<input type="hidden" name="ms" value="0" class=checkbox>
<a href="#"onclick="checkbox('mails','pd','ms');return false;"><img name="mails"src="images/checkbox0.gif" border="0"></a>
<a onClick="changeBox('document.pd.ms');return false" href="#" class=tab-content>Aerobic</a><br>
         
<input type="submit" name="Submit" value="  Ausw&auml;len  " class="abschicken1">
</form>
</body>

Und wie bekomm ich das hin, das beim Klicken auf den Textlink, die box aktiviert bzw. deaktiviert wird?
Hoffe du kannst mir helfen.
Danke schon mal.
Gruß Robin

 

[Sven Mintel]

Nö... das funktioniert mit beliebig vielen Boxes.

du musst den hidden-<input>'s und den Bildern mit der Checkbox natürlich unterschiedliche Namen geben....
gleichnamige Checkboxes machen idR. selten Sinn.

Diese Namen übergibst du dann der Funktion "checkbox()" als Parameter...(und den Namen des Formulars)
....
der Aufruf ist beim Textlink der selbe wie bei dem Checkbox-Link... das ist ja auch nur nen Link..

onclick="checkbox('checkboxBildName','formularname','hiddenInputName');return false;"

mit mehreren Checkboxes gehts demnach so:

<form name="pd" method="post" action="">

<input type="hidden" name="box1" value="0">
<a href="#"onclick="checkbox('bild1','pd','box1');return false;"><img name="bild1"src="images/checkbox0.gif" border="0"></a>
<a href="#"onClick="checkbox('bild1','pd','box1');return false">Text1</a><br>

<input type="hidden" name="box2" value="0">
<a href="#"onclick="checkbox('bild2','pd','box2');return false;"><img name="bild2"src="images/checkbox0.gif" border="0"></a>
<a href="#"onClick="checkbox('bild2','pd','box2');return false">Text2</a><br>

</form>

 

[robinK]

Fantastisch,
es funtioniert prima. Besten Dank.
Das einzige, was mir jetzt noch zu meinem Glück fehlt ist, dass ich die Checkboxen noch auswerten muß, d.h. sobald keine box aktiviert ist, soll beim Klicken auf den Submit-button eine Meldung kommen, dass mindestens eine box aktiviert sein.

Vielleicht weißt du da ja auch Rat.

Schöne Grüße Robin

 

[Krypthonas]

Das ist dein geringstes Problem.

Zu deiner Checkbox erstellst du ein hidden Type Objekt das du mit der verändern der Checkbox ansteuerst. Ist die Checkbox auf "Ja" gestellt dann schreibe in hidden Objekt 1 wenn nicht 0;

Ich stande vor einer Woche auch an der Stelle und habe aber noch eine Spur weiter gedacht. Was ist wenn du eine Automatisierte Darstellung der Checkboxen darstellen willst? Z.B. eine direkte Workflow Einstellung mit eigenen Checkboxen?

Dort funktioniert das Einbinden indem man vordifinierte Variablen in einer *.js Datei abspeichert und eine Installationsroutine über deine momentane Site jagst die gewisse inputs überprüft ob diese vorhanden sind und diese darstellst.

In diesem Sinne

 

[robinK]

Danke für den Tip,
ich dachte, das es einen Befehl gibt, der alle input-felder (in dem Fall checkboxen) auf einmal überprüft.

So was wie hier:

 function CheckForm(pd){
	var noneChecked = true;
	for (var i=0; pd.elements.length; i++) 
		{if (pd.elements[i].type=="checkbox") { if (pd.elements[i].checked) noneChecked = false; } } 
	if (noneChecked) alert("Keine Checkbox markiert !");}

Nur funktioniert es nicht.

Gruß Robin

 

[Sven Mintel]

Wie soll das gehen... da sind doch keine Checkboxen, nur Dinger welche so aussehen.
Wenn du was überprüfen willst, überprüfe alle Felder vom type "hidden".... addiere deren values zusammen. Ist die Summe dessen am Ende 0, dann wurde keine der Pseudo-Checkboxes ausgewählt.