• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

eine Checkbox auf mehrere Fenster mit verschiedenen Variablen

ThomasU

Neues Mitglied
HHey. Also problem ist folgendes. Ich habe mir da nach langem suchen und fast keinen HTML erfahrungen so ein Script zusammengestellt. Nun hätte ich gerne, dass wenn ich z.B "KATZE" anklicke im ersten Feld: Hund, im 2. Textfeld: Maus und im 3. Feld : Miau steht. Nur als beispiel.. Wie bekomme ich denn sowas hin ?
danke für die Hilfe

HTML:
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
 
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
 
  <style type='text/css'>
 
  </style>
 
  <script type='text/javascript'>
  //<![CDATA[ 
  $(window).load(function(){
  function updateTextArea() {     
   var allVals = [];
   $('.taglist :checked').each(function(i) {
 
       allVals.push((i!=0?"\r\n":"")+ $(this).val());
   });
   $('#video0_tags').val(allVals).attr('rows',allVals.length) ;
 
   }
   $(function() {
      $('.taglist input').click(updateTextArea);
      updateTextArea();
});
  });
  //]]> 
  </script>
 
</head>
<body>
  <textarea class="textfield" id="video0_tags" name="video0_tags"></textarea>
<textarea class="textfield1" id="video0_tags1" name="video0_tags1"></textarea>
<textarea class="textfield2" id="video0_tags2" name="video0_tags2"></textarea>
<div class="taglist">
<label><input type="checkbox" value="krank">aua</label>
<label><input type="checkbox" value="hund">katze</label>
<label><input type="checkbox" value="Animatronics">Animatronics</label>
<label><input type="checkbox" value="Architectural">Architectural</label>
<label><input type="checkbox" value="Cartoon">Cartoon</label>
<label><input type="checkbox" value="Cell Animation">Cell Animation</label>
<label><input type="checkbox" value="Character Animation">Character Animation</label><label><input type="checkbox" value="Cut & Paste">Cut & Paste</label>
<label><input type="checkbox" value="Doodle">Doodle</label>
<label><input type="checkbox" value="HDR">HDR</label>
<label><input type="checkbox" value="High Speed">High Speed</label>
<label><input type="checkbox" value="Illustration">Illustration</label>
<label><input type="checkbox" value="Live Action">Live Action</label>
<label><input type="checkbox" value="Macro">Macro</label>
<label><input type="checkbox" value="Motion Design">Motion Design</label>
<label><input type="checkbox" value="Motion Graphics">Motion Graphics</label>
<label><input type="checkbox" value="Moving Installation">Moving Installation</label>
</div>
 
</body>
 
</html>
 
HTML
Code:
<input type="checkbox" value="hund" onclick="showContents(this,'Maus','miau');">

JavaScript
Code:
function showContents(obj, text2, text3) {
  document.getElementById('video0_tags').innerHTML = obj.value;
  document.getElementById('video0_tags1').innerHTML = text2;
  document.getElementById('video0_tags'2).innerHTML = text3;
}

So als Grundlage ..

Dein HTML-Code sieht auch noch nicht optimal aus, ist aber ein guter Anfang. Wenn Du die Formulardaten auch verarbeiten willst, muss Du den Formularfeldern auch Namen geben, nicht nur values, und alles auch von einem Formular (<form>) umgeben lassen. Das wie auch ein Doctype ist essentiell wichtig damit das JavaScript in der Seite korrekt funktionieren kann.

Da deine Frage eine JavaScript-Frage ist, habe ich sie auch mal in den richtigen Bereich dafür geschoben.
 
Vielen dank. Hab mir den Code noch Net genauer angeschaut da ich Net zaus bin. Und wie mache ich dies mit den anderen Beispielen darunter ? Oder halt mit mehr als einem? Bzw. Steht der Text im textfield dann eh auch untereinander? Also wenn ich mehrere Texte hab. Sprich in meinem beispiel.. Katze Hund maus miAu im separaten spAlten und zb. Eins zwei und drei dann eben darunter mit einer Zeile Abstand ? Sorry kenn mich so schlecht aus. Lg
 
Deswegen habe ich dir oben eine Funktion entworfen die allgemein für alle Auswahlfelder genutzt werden könnte. Du müsstest nur jeweils die Parameter anpassen.
 
Meine Vorlage:
Code:
<input type="checkbox" value="hund" onclick="showContents(this,'Maus','miau');">

Eine mögliche Kopie davon die Du verwenden könntest:
Code:
<input type="checkbox" value="esel" onclick="showContents(this,'Mensch','ia');">

Soweit klar? Wenn nicht, schau dir die Grundlagen für JavaScript-Funktionen mal an. Die erleichtern ungemein das Leben/die Programmierung.
 
vielen dank und wie bekomme ich es auf die reihe dass die begriffe jeweils in einer Spalte dargestellt werden durch einen checkbox.
 
Also mitlerweile ist mein script etwas weiter.. Aber wie füge ich nun eine Checkbox ein, welche genau unter den werten der angeklickten checkbox (Jürgen, Schmerzen, chron. Schmerz)
eben noch andere werte schreibt.. Zb. (Daniela, KnieOP, leidend ), Und wenn ich eine checkbox wieder (unchecke ) soll diese zeile wieder verschwinden
Insgesamt werden dies einige variablen werden.. Wenn mir wer mein Beispiel um diese zeile erweitert wäre ich sehr dankbar.


<!doctype html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
function firstcheckbox () {
if(document.myform.mycheckbox.checked){
document.myform.user.value = "jürgen"; document.myform.beschwerde.value = "schmerzen";
document.myform.diagnose.value = "chron. Schmerzstörung";
}else{
document.myform.user.value = "default";
document.myform.beschwerde.value = "default";
document.myform.diagnose.value = "default";
}

}


</script>
</head>
<body>
<div>pflegebericht</div>

<form name="myform">
<table border="1" color="grey">
<tr>
<td>Probleme</td><td> <input type="checkbox" name="mycheckbox" value="fueller" onClick="firstcheckbox()" checked="checked"> </td>
</tr>
<tr>
<td> name:</td><td><textarea name="user" cols="50" rows="10">default</textarea></td>

</tr>
<tr><td>
beschwerde:</td><td><textarea name="beschwerde" cols="50" rows="10">default</textarea></td>
</tr>
<tr><td>
diagnose:</td><td><textarea name="diagnose" cols="50" rows="10">default</textarea></td>
</tr>
<tr>
<td>&nbsp;</td><td><input type="reset" value="zurücksetzen"></td>

</tr>
</table>

</form>

</body>
</html>
 
Das ließe sich durch Ein- und Ausblenden der entsprechenden Elemente per Beeinflussung der CSS-Eigenschaft display regeln.

Beispiel:
Code:
<a href="#" onclick="return ElementStatus('eineID');">Klick mich zum Aufklappen</a>

Code:
function ElementStatus(objID) {
 if( document.getElementById(objID).style.display == "none")
 {
   document.getElementById(objID).style.display = "block";
 }
 else
 {
   document.getElementById(objID).style.display = "none";
 }
 return false;
}

Diese Funktion ließe sich auch an input-Felder binden, je nachdem bei welchem Ereignis Du es auslösen möchtest.

Hinweis: da Du mit unnötigen Tabellenzellen arbeitest, musst Du beim Setzen des "anzeigen"-Wertes ("block" in meinem Beispiel) je nach Browser einen anderen Wert setzen. Der IE möchte hier "block", alle anderen Browser brauchen "table-cell" als Wert, wenn es sich bei dem Element um eine Tabellenzelle handelt. Der Verzicht auf Tabellenzellen würde es einfacher machen.
 
Und wie bringe ich es soweit, dass sich die Werte in den feldern nicht überschreiben sondern untereinander stehen? danke.mfg
 
"Überschreiben" und "untereinander stehen" sind 2 verschiedene Sachen. Letzteres hat mit Deinem HTML- und CSS-Aufbau zu tun. Ersteres mit JavaScript. Bei meinem Beispiel oben wird nichts "überschrieben". Wie das dann dargestellt wird, hängt von deinem HTML- und CSS-Aufbau ab.
 
Zurück
Oben