✔ Verstecken und einblenden

S

stefan27185

Grünschnabel
Hallo liebe Forenmitglieder..

Ich habe ein kleines Projekt vor mir und wollte fragen ob ihr mir weiterhelfen könnt.
Es geht um mehrere Checkbocken, wenn diese gecklickt werden soll ein ein Objekt eingeblendet werden.
Ich habe Etwas code gefunden wo ich dezitiert schreiben kann wenn die CHECKBOX
mit dem Namen ... gedrückt wird dann soll ... erscheinen, alles schön und gut.
Jetzt habe ich aber so viele CHECKBOXEN so ca. 50 das es schön langsam mühsam wird die Übersicht über den JavaScript code zu behalten, ich habe für jede CHECKBOX die geklickt wird und das Objekt das erscheinen soll immer wieder das selbe geschrieben, eben nur mit anderen Namen.
Kann ich nicht eine Funktion erstellen die mit Variablen arbeitet? Damit ich diese funktion bei allen CHECKBOXN hernehmen kann?
Ich schaffe irgendwie den gedankensprung nicht das ich die Funktion so verallgemeinere das es bei allen funktioniert.
Und was muss ich in den HTML Code schreiben das immer diese Funktion aufgerufen wird?

Hier das Stück Code mit dem ich arbeite .... bis jetzt

HTML: 
	// Optionen erst sichtbar, wenn Checkbox gechecked ist
	var Finisher = $("#Finisher");
	var isChecked = Finisher.is(":checked");
	var themen = $("#Optionen");
	themen[isChecked ? "show" : "hide"]();
	//var themaInputs = themen.find("input")
	// .attr("disabled", !isChecked);
	Finisher.click(function() {
		themen[this.checked ? "fadeIn" : "fadeOut"](1000);
		//themaInputs.attr("disabled", !this.checked);
	});
});

LG
Stefan
 
Hallo,

zeige doch mal bitte einen Schnipsel von dem Markup, welcher alle betroffenen Elemente enthält.
 
carta-kopiertechnik.at/konfigurator.php

Das ist natürlich nur ein kleiner auszug, der konfigurator ist in php geschrieben und reagiert auf die variable die per POST mitgesendet wird... kann sein das du auf carta-kopiertechnik gehen musst unter PRODUKTE/OLIVETTI und dann bei der ersten maschine auf konfigurator...
 
Zuletzt bearbeitet:
Also wenn man die Seite aufruft die du oben geschrieben hast, dann kann zumindest ich nichts darauf entdecken was mit deinem Problem zu tun hat!? - Ok, das nehme ich zurück. Habe erst jetzt gelesen wie man die Seite wirklich aufrufen soll.

Mit diesem Beispiel hier hast du nur ein paar Zeilen Code und kannst alle Checkboxen damit abarbeiten. Bei den ersten beiden wird einfach eine fortlaufende Nummer zur Identifizierung verwendet. Bei den beiden anderen wird der jew. Name verwendet. Je nachdem wie es bei dir besser passt.

Javascript: 
<script language="javascript" type="text/javascript">
function checkbox_click1(nummer) {
	if (document.getElementById("box" + nummer).checked == true) {
		document.getElementById("anzeige" + nummer).style.display = "block";
	} else {
		document.getElementById("anzeige" + nummer).style.display = "none";
	}
}

function checkbox_click2(box, container) {
	if (document.getElementById(box).checked == true) {
		document.getElementById(container).style.display = "block";
	} else {
		document.getElementById(container).style.display = "none";
	}

}
</script>
Aufruf &uuml;ber Nummer<br />
<input type="checkbox" name="box1" value="1" onclick="checkbox_click1(1);" />
<br />
<div id="anzeige1" style="display: none;">Ich geh&ouml;re zur Checkbox 1</div>
<br />
<input type="checkbox" name="box2" value="2" onclick="checkbox_click1(2);" />
<br />
<div id="anzeige2" style="display: none;">Ich geh&ouml;re zur Checkbox 2</div>
<br />
Aufruf &uuml;ber den Namen<br />
<input type="checkbox" name="box3" value="3" onclick="checkbox_click2('box3', 'anzeige3');" />
<br />
<div id="anzeige3" style="display: none;">Ich geh&ouml;re zur Checkbox 3</div>
<br />
<input type="checkbox" name="box4" value="4" onclick="checkbox_click2('box4', 'anzeige4');" />
<br />
<div id="anzeige4" style="display: none;">Ich geh&ouml;re zur Checkbox 4</div>

Vielleicht hilft dir das ja bei deinem Problem weiter!?
 
Zuletzt bearbeitet:
Das Markup dort sieht für dein Anliegen recht günstig aus(man könnte auch sagen optimal ;)).

Code: 
jQuery(
  function($)
  {
    $('#form input.checkable')
      .bind('click init',function()
             {
               var isChecked=$(this).is(':checked');
               $(this).next('.options')[(isChecked)?'show':'hide'](1000)
                 .find('input[type="checkbox"]').prop('disabled',!isChecked)
             }).trigger('init');
  }
);

Das sollte komplett für alles ausreichen, Variablen, Parameter etc. sind nicht notwendig, da alles aus der Dokumentstruktur hervorgeht, was du brauchst.

  1. Die zu klickenden checkboxen('#form input.checkable')
  2. Das zur checkbox passende div was angezeigt/versteckt werden soll(es ist jeweils der nachfolgende Knoten, kann also per next() angesprochen werden)
  3. Die Checkboxen der Unterkategorien(befinden sich ja alle in diesem div)

Demo basierend auf deinem Markup: http://jsfiddle.net/4EN7R/
 
Zuletzt bearbeitet:
Dankeschön für deine Beispiele, schön langsam wird das verständniss besser mit JS...
Ich werde es gleich einbauen... noch ne kleine Frage...
Wenn ich statt dem next() -> getElementbyID() verwende wie spreche ich dann die einzelnen Checkboxen an? Statt dem $(this) auch ein getElementbyID() oder schon weiter oben bei dem input.checkable?
In weiterer Form blende ich mit den Optionen die ja eingeblendet werden noch einzelne Blockelemente ein die nicht genau unter der Checkbox ist...

LG und danke nochmal

Stefan

Ich habe alles gelöst... Danke
Der Beitrag kann geschlossen werden...

LG und Vielen Dank Stefan

Kann mir bitte jemand einen Tipp geben warum das nicht funktioniert?
PHP: 
$(document).ready(function check()
    
    {
    if (document.getElementById("unterschrank").checked==true)
    {
      document.getElementById("2").css("visibility","inherit");
    };})

LG Stefan
 
Wie sieht denn der HTML-Teil dazu aus mit den beiden Elementen "unterschrank" und "2"?

Javascript: 
var check = function()  {
    if (document.getElementById("unterschrank").checked==true)  {
      document.getElementById("2").css("visibility","inherit");
    }
}

$(document).ready(function()  {
    // hier rufst du check auf:
    check();
});
 
Zuletzt bearbeitet von einem Moderator:
PHP: 
<input type="checkbox" id="unterschrank" class="checkable" />
				<div class="options">
				<fieldset id="Optionen9">
				<legend>Optionen</legend>';
				// ------------------------------------------------------------------------------------------------------------
				if ( $sel7opt1 != false)
					{
					echo '
						<input  id="sel7opt1input"  type="checkbox" name="sel7" value="'.$sel7opt1.'"/> '.$sel7opt1.'</br>';
					}
					else {}
				// ------------------------------------------------------------------------------------------------------------	
					if ($sel7opt2 != false)
					{
						echo'
							<input id="sel7opt2input" type="checkbox" name="sel7" value="'.$sel7opt2.'"/> '.$sel7opt2.'</br>';
					}
					else {}
				// ------------------------------------------------------------------------------------------------------------	
					if ($sel7opt3 != false)
					{
						echo'
							<input id="sel7opt3input" type="checkbox" name="sel7" value="'.$sel7opt3.'"/> '.$sel7opt3.'</br>';
					}
					else {}
				// ------------------------------------------------------------------------------------------------------------	
					if ($sel7opt4 != false)
					{
						echo'
							<input id="sel7opt4input" type="checkbox" name="sel7" value="'.$sel7opt4.'"/> '.$sel7opt4.'</br>';
				
					}
					else {}
				// ------------------------------------------------------------------------------------------------------------	
					if ($sel7opt5 != false)
					{
						echo'
						Bannerzufuhr:&nbsp;<input id="sel7opt5input" type="checkbox"  value="'.$sel7opt5.'" >';
					}
					else {}
				// ------------------------------------------------------------------------------------------------------------
				echo '</fieldset></div>
		
				';
				}
				else {}

und

PHP: 
<img class="nach_oben" id="2" style="visibility:hidden;  ; position:absolute; z-index:17" src="konfigurator_png/m_unterschrank.png" />
 
Und wann willst du check() aufrufen? Also was möchtest du erreichen? Wenn der Besucher den Zustand der Checkbox ändert? Wenn er auf einen Button oder Link klickt? Wenn er eine Taste drückt? Oder ganz einfach (so wie im Codeblock zwei Posts über diesem hier) beim Seitenaufruf, was eigentlich keinen Sinn macht?

Gruß
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück