• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Checkbox & Text ausgabe

H

hanibalsmith

New member
Checkbox & Text ausgabe

Hallo liebe Community,

ich habe wieder mal eine Frage zu Javascript ich wusste leider keinen besseren Titel sorry dafür :)

Also ich möchte gerne wenn man eine Checkbox anklickt soll bei einer bestimmten Position ein normaler Text auftauchen ich denke mal das man das irgendwie mit dem Post verknüpfen muss?

Wäre super wenn mir da jemand helfen kann.

Checkbox:


HTML: 
Check1 <input type="checkbox" name="Check1" value="test" id="Check">

konkret soll es dann folgender Text ausgegeben werden:


Check1 test

Also Name + Value


Danke im Vorraus!

- - - Aktualisiert - - -

habe es gerade geschafft nur jetzt hänge ich bei einem anderen problem - wenn ich die Checkbox wieder abwähle bleibt der Text stehen - der soll dann aber wieder verschwinden
 
Sry eigentlich bin ich bis jetzt erst soweit das es über HTML funktioniert:

HTML: 
<p>Checkbox1
  <input type="checkbox" id="Checkbox1" name="Checkbox1" value="Blabla123" onclick="document.Berechnen.anzeige.value = this.value"> 

<textarea name="anzeige" id="anzeige" rows="30" cols="100"></textarea>

und dann dachte ich an eine Funktion so wie diese hier:

HTML: 
function Checkbox(){
		var a = (document.Berechnen.Checkbox1.value);
		var b = (document.Berechnen.Checkbox2.value);

hier würde mir dann noch eine passende IF formel oder etwas in der art fehlen damit ich dann das angehackerlte auch in das Textfeld bekomme

Natürlich soll die Checkbox bzw. der Text den die Checkbox übergibt auch wieder entfernt werden wenn diese wieder "ungecheckt" wird

aber kann ich das dann überhaupt mit einer JS function machen? Oder wäre es nicht einfacher vorher alle Checkboxen auszuwählen und nach der auswahl auf einen Button zu klicken (so wie wir es schon bei meiner anderen Anfrage gemacht haben siehe hier:)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 

<title>Berechnen</title> 

<script language="JavaScript"> 
<!-- 
function Rechnen(){ 
 a = document.Berechnen.Feld1.value; 
 b = document.Berechnen.Feld2.value; 
 c = document.Berechnen.Feld3.value;
 d = document.Berechnen.Feld1a.value;
 e = document.Berechnen.Feld2a.value;
 f = document.Berechnen.Feld3a.value;
 g = d*e*f/6000;
 y = a*c; 
 
 document.Berechnen.Gesamt.value = y;
 }
 
 
// --> 
</script> 
 
</head> 
 
<body> 
 
<form method="POST" action="" name="Berechnen"> 
<div align="center">Feld1
    <select name="Feld1" size="1">
      <option value="1.25">Option 1</option>
      <option value="1.60">Option 2</option>
    </select>
    <br /> <br />


  </select><br /> <br />
Feldx
<select name="Feldx" size="1">
  <option value="">""</option>
</select>
<br /> <br />
Feld 2 <input type="text" name="Feld2" /> <br /> <br />
	

Feld3 <input type="number" select name="Feld3"> <br />

Feld1a <input type="number" select name="Feld1a">
Feld2a <input type="number" select name="Feld2a">
Feld3a <input type="number" select name="Feld3a"> <br />

<td>Gesamt <input type="text" name="Gesamt" size="10" onclick="Rechnen()"></td>

  </div>
		<tr> 
			<td align="right"><input type="button" value="Berechnen" onclick="Rechnen()"></td> 
			<td align="right"><input type="reset" value="Löschen"></td> 
			<td> </td> 
		</tr> 
	</table> 
	</div> 


</form> 
 
</body> 
 
</html>

hier könnte ich doch einfach beim klick auf den Button eine 2.Funktion mitangeben der überprüft ob die Checkboxen ausgewählt sind oder nicht und wenn ja soll er die Value der Checkbox in ein Textfeld übertragen - am besten mit Zeilenumbruch pro Checkbox
 
Zuletzt bearbeitet von einem Moderator:
Darf der Benutzer auch selber in das Textfeld reinschreiben? Wenn ja, wird das Problem schwieriger, da man ja den benutzerdefinierten Inhalt nicht wegschmeißen will.
Wenn nein, kannst du einfach bei jeder Änderung einer Checkbox (onchange-Event) den kompletten Text anhand der markierten Checkboxen neu erstellen:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<label><input type="checkbox">a</label>
<label><input type="checkbox">b</label>
<label><input type="checkbox">c</label>
<label><input type="checkbox">d</label>
<label><input type="checkbox">e</label>
<label><input type="checkbox">f</label>
<label><input type="checkbox">g</label>
<label><input type="checkbox">h</label>
<textarea id="output" readonly></textarea>
<script type="text/javascript">
(function(){
	var checkboxes = Array.prototype.slice.call(document.querySelectorAll("input[type=checkbox]"));
	var output = document.getElementById("output");
	checkboxes.forEach(function(c){
		c.addEventListener("change", update, false);
	});
	function update(){
		output.value = checkboxes.filter(function(ch){
			return ch.checked;
		}).map(function(ch){
			return ch.parentNode.textContent;
		}).join("\n");
	};
}());
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben