✔ mit Checkbox CSS Werte dynamisch verändern

N

Nikke123

Mitglied
Hallo Leute,

Ich habe eine Checkbox erstellt und wenn man die antickt, soll der "width" Wert eines Divs verändert werden. Wenn die Box angecheckt wird soll etwas draufgerechnet werden und wenn die wieder ungecheckt wird soll wieder von der width was abgerechnet werden. Momentan habe ich das folgende was aber nicht klappt:

Hier mein Javascript teil, welcher aber noch nicht das abrechnen von der width beinhaltet ( weis auch nich wie ich das machen soll )
PHP: 
		<script type="text/javascript">
		var k = 0;
		function calc(i)
		{
			k = k + i;
		    document.getElementsByTagName("fortschritt").style.width = k;
		}
		</script>

und hier die Checkbox
PHP: 
<input type='checkbox' name='checkbox[]' value='".$blumen_array['name']."' onclick='javascript:calc(".$blumen_array['groeße'].");' > Diese Pflanze auswählen</input>

Brauche dringend eure Hilfe. Das ganze soll ein Fortschritts button werden. Desto mehr Blumen man per Checkbox auswählt, desto weiter schreitet der vor um einen bestimmten Wert und wenn die Checkbox angecheckt wird soll der Fortschrittsbalken wieder um denselben Wert zurpckgehen...

Viele Grüße
Nikke123
 
N'abend,

um den Zustand der Checkbox gleich mit zu übergeben, könntest du die Inputs so schreiben:

PHP: 
<input type='checkbox' name='checkbox[]' value='".$blumen_array['name']."' onclick='javascript:calc(".$blumen_array['groeße'].", this.checked);' > Diese Pflanze auswählen</input>

Ich versteh nicht ganz, warum du im JS-Block getElementsByTagName verwendest - es geht hierbei doch um einen Div-Container, der von allen Checkboxen beeinflusst werden soll (korrigier mich, wenn falsch). Drum werd ich im weiteren Verlauf stattdessen getElementById("fortschritt") verwenden.


PHP: 
<div id="fortschritt"></div>


Im JS-Block:

Code: 
var k = 0;
function calc(i, checked)
{
  if(checked)  k += i;
  else  k -= i;
 
  document.getElementById("fortschritt").style.width = k;
}

Wenn checked true, erhöhe k um i, sonst ziehe i von k ab und setzte die Div-Breite auf i.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück