mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 09:40 Benutzername: Passwort: Auto-Login

Thema: Checkbox soll ein und ausblenden? vom 02.09.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Checkbox soll ein und ausblenden?
Autor Nachricht
ginobranco
Threadersteller

Dabei seit: 08.06.2009
Ort: Hamburg
Alter: 39
Geschlecht: Männlich
Verfasst So 02.09.2012 15:26
Titel

Checkbox soll ein und ausblenden?

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

vielen Dank fürs reinschauen. Lächel

Ich habe hier mir eine kleine Funktion gebastelt, mittels "Auswahl-Menü" kann ich mir verschiedene Textfelder ein und ausblenden:

Code:
<html>
<head>
<script type="text/javascript">
function einblenden(){
var select = document.getElementById('kleidungsstueck').selectedIndex;
document.getElementById('jacke').style.display = (select == 1? "block": "none");
document.getElementById('hose').style.display = (select == 2? "block": "none");
}
function ausblenden(){
document.getElementById('jacke').style.display = "none";
document.getElementById('hose').style.display = "none";
}
</script>
</head>
<body onload="einblenden()">
<form value="auswerten.php" onReset="ausblenden()">
<select name="kleidungsstueck" id="kleidungsstueck" onchange="einblenden()" >
<option value="">Auswahl</option>
<option value="1">Jacke</option>
<option value="2">Hose</option>
</select><br />
<div id="jacke" style="display: none;">Jacke: <input type="text"><br /></div>
<div id="hose" style="display: none;">Hose: <input type="text"><br /></div>
</form>
</body>
</html>


Funktioniert auch ohne Probleme.

Doch ich möchte das ganze über eine Checkbox laufen lassen.

z.B. Ich klicke auf die Checkbox (Telefon) und dann öffnet es mir unten ein Textfeld wo ich meine Telefonnummer eingeben kann. Leider schaffe ich es aber nicht, diesen Code auf eine Checkbox umzuschreiben.

Hat jemand eine Idee wie ich das realisieren kann?

Würde mich über jede Hilfe sehr freuen.

Vielen Dank
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst So 02.09.2012 16:14
Titel

Antworten mit Zitat Zum Seitenanfang

Mit jQuery werden solche Sachen zum No-Brainer. http://jsfiddle.net/jP3ZL/ Dagegen solltest DU von Relikten wie Inline-Stylesheets und Inline-Event-Attributen endlich Abstand nehmen. So sieht kein zeitgemäßes Webdesign aus.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
ginobranco
Threadersteller

Dabei seit: 08.06.2009
Ort: Hamburg
Alter: 39
Geschlecht: Männlich
Verfasst So 02.09.2012 16:50
Titel

Antworten mit Zitat Zum Seitenanfang

Ja stimmt Jquery ist besser.. Lächel danke


Funktioniert:

Code:
<html><head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function () {
    $('input[type="checkbox"][data-target]')
      .change (function () {
        var target = $($(this).data ('target'));
        target.toggleClass ('hidden' , ! $(this).attr ('checked'));
      })
      .change ();
});
</script>
<style type="text/css">
.hidden {
  display:none;
}
</style>
</head><body>
<input type="checkbox" id="c1" data-target="#tggl1"> <label for="c1">Toggle 1</label>



<div id="tggl1" class="hidden">
   <input name="" type="text">
</div>


</body></html>
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst So 02.09.2012 17:20
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
class="hidden"
Das ist unnütz. Weil das Script eigenständig die Sichtbarkeit am Checkboxstatus initialisiert. So hast Du nur das Problem, dass ohne eingeschaltetes Javascript Deine Formulare nicht mehr bedienbar sind.
  View user's profile Private Nachricht senden
 
Ähnliche Themen [php] checkbox
checkbox - pflichtfeld - AGB
Update mit checkbox
Checkbox die wegspringt ...
input.checkbox
jquery checkbox
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.