nicht angemeldet
Tickboxen
Hallo zusammen,
ich hab hier eine einfache Abfrage von Hobbys in dem Fall.
Wie programmiere ich, dass wenn jmd "Handball" anklickt, dass dann automatisch "Sport" mit "angekreuzt" wird?
Danke schonmal!
Hier der Quelltext, falls es jmd interessiert:
<html>
<head>
<title>Meine Hobbys</title>
</head>
<body>
<h1>Meine Hobbys sind...</h1>
<form name="frm">
<input type="checkbox" name="hobby1" value="Musik"> Musik <br>
<input type="checkbox" name="hobby2" value="Computer"> Computer <br>
<input type="checkbox" name="hobby3" value="Mathe"> Mathematik <br>
<input type="checkbox" name="hobby4" value="Lesen"> Lesen <br>
<input type="checkbox" name="hobby5" value="Sport"> Sport <br>
<input type="checkbox" name="hobby6" value="Handball"> Handball <br>
<br>
<input type="button" value="Zeige Hobbys..." onClick="auswertung()">
</form>
<script language="JavaScript">
<!--
function auswertung()
{
eingabe=""
if (document.frm.hobby1.checked)
{
eingabe += "Musik \n";
}
if (document.frm.hobby2.checked)
{
eingabe += "Computer \n";
}
if (document.frm.hobby3.checked)
{
eingabe += "Mathematik \n";
}
if (document.frm.hobby4.checked)
{
eingabe += "Lesen \n";
}
if (document.frm.hobby5.checked)
{
eingabe += "Sport \n";
}
if (document.frm.hobby6.checked)
{
eingabe += "Handball ";
}
alert(eingabe);
}
//-->
</script>
</body>
</html>
-
Heyho Miriam,
<input type="checkbox" name="hobby5" value="Sport"> Sport <br>
<input type="checkbox" name="hobby6" value="Handball"> Handball <br>Probier das mal aus...
HTML:
<input id="sport" type="checkbox" name="hobby5" value="Sport"> Sport <br> <input type="checkbox" name="hobby6" value="Handball" onklick="check(this,'sport')"> Handball <br>Javascript:
function check(element,id){ if(element.getAttribute('checked') == 'checked'){ document.getElementById(id).setAttribute('checked','checked'); } else { document.getElementById(id).setAttribute('checked',''); } }So in etwa müßte es hinhauen. Ich hoffe es zeigt dir auf jeden Fall die Richtung an :)
MfG,
Jurik-
Etwas eleganter gehts wohl mit:
function check(element,id){ if(element.checked == true){ document.getElementById(id).checked = true; } else { document.getElementById(id).checked = false; } }-
Mahlzeit,
Etwas eleganter gehts wohl mit:
Und NOCH eleganter wäre es so:
function check(element, id) { var other = document.getElementById(id); if (typeof(other) == 'object') { other.checked = element.checked; } }Und der korrekte HTML-Code lautet:
<input type="checkbox" name="hobby6" value="Handball" onclick="check(this,'sport')">MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Mahlzeit,
Schon beim Abendessen?
Etwas eleganter gehts wohl mit:
Und NOCH eleganter wäre es so:
Und NOCH VIEL ELEGANTERER und auch bei komplexeren Abhängigkeiten nutzbar ist
function check(el) { if(el.checked) for(var i = 1; i < arguments.length; ++i) { var item = el.form[arguments[i]]; item.checked = true; if(item.onclick) item.onclick.call(item); } } function uncheck(el) { if(!el.checked) for(var i = 1; i < arguments.length; ++i) { var item = el.form[arguments[i]]; item.checked = false; if(item.onclick) item.onclick.call(item); } }nutzbar z.B. so:
<input type="checkbox" name="sport" onclick="uncheck(this, 'ballsport')"> Sport<br> <input type="checkbox" name="ballsport" onclick="uncheck(this, 'fussball', 'handball'); check(this, 'sport')"> Ballsport<br> <input type="checkbox" name="fussball" onclick="check(this, 'ballsport')"> Fussball<br> <input type="checkbox" name="handball" onclick="check(this, 'ballsport')"> HandballChristoph
-
Hi,
das würde ich dann aber noch parametriesieren, da beide funktionen fast das gleiche tun => code gespart:
function check(el, check) {
if(el.checked === check) for(var i = 2; i < arguments.length; ++i) {
var item = el.form[arguments[i]];
item.checked = check;
if(item.onclick)
item.onclick.call(item);
}
}und das item.onclick.call(item) kann man sich auch sparen, da man "this" nicht benötigt. Es würde wohl reichen item.onclick(); Wie auch immer. noch eleganter wäre es, wenn man JS vom Markup trennt und die events dynamisch bindet. Und am besten die Abhängigkeiten in einem Tree abbildet und für das ganze sich einen schönen Manager gebastelt, der das alles erledigt. Naja, vermutlich overkill für diese Aufgabe, aber elegant ;-) Gruß!-
Moin.
Wie auch immer. noch eleganter wäre es, wenn man JS vom Markup trennt und die events dynamisch bindet. [...] Naja, vermutlich overkill für diese Aufgabe, aber elegant ;-)
Z.B. so ;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <title>Test</title> <script type="text/javascript">onload = function() { var deps = { sport : ['ballsport'], ballsport : ['fussball', 'handball'], fussball : [], handball : [] }; var form = document.forms[0]; for(var name in deps) { form[name].requires = []; form[name].inferences = deps[name]; form[name].onclick = function() { var arr = this.checked ? this.requires : this.inferences; for(var i = 0; i < arr.length; ++i) { var el = form[arr[i]]; if(el.checked !== this.checked) { el.checked = this.checked; el.onclick(); } } }; } for(var name in deps) { for(var i = 0; i < deps[name].length; ++i) form[deps[name][i]].requires.push(name); } }; ~~~~~~html </script> <body> <form action=""> <input type="checkbox" name="sport"> Sport<br> <input type="checkbox" name="ballsport"> Ballsport<br> <input type="checkbox" name="fussball"> Fussball<br> <input type="checkbox" name="handball"> Handball </form>Christoph
-
-
-
<html>
<head>
<title>Meine Hobbys (Part II)</title>
</head>
<body>
<h1>Meine Hobbies sind...</h1>
<form name="frm">
<input type="checkbox" name="hobby1" value="Musik"> Musik <br>
<input type="checkbox" name="hobby2" value="Computer"> Computer <br>
<input type="checkbox" name="hobby3" value="Mathe"> Mathematik <br>
<input type="checkbox" name="hobby4" value="Lesen"> Lesen <br>
<input id="sport" type="checkbox" name="hobby5" value="Sport"> Sport <br>
<input type="checkbox" name="hobby6" value="Handball" onklick="check(this,'sport')"> Handball <br>
<br>
<input type="button" value="Zeige Hobbys..." onClick="auswertung()">
</form>
<script language="JavaScript">
<!--
function auswertung()
{
eingabe=""
if (document.frm.hobby1.checked)
{
eingabe += "Musik \n";
}
if (document.frm.hobby2.checked)
{
eingabe += "Computer \n";
}
if (document.frm.hobby3.checked)
{
eingabe += "Mathematik \n";
}
if (document.frm.hobby4.checked)
{
eingabe += "Lesen \n";
}
if (document.frm.hobby5.checked)
{
eingabe += "Sport \n";
}
if (document.frm.hobby6.checked)
{
eingabe += "Handball \nSport ";
dannAuchSport();
}
alert(eingabe);
}
function dannAuchSport()
{
alert("Wenn Ihr Hobby Handball ist, dann auch Sport!");
}
function check(element, id)
{
var other = document.getElementById(id);
if (typeof(other) == 'object')
{
other.checked = element.checked;
}
}
//-->
</script>
</body>
</html>-
Mahlzeit,
warum postest Du jetzt nochmal Deinen ursprünglichen Code?
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:| -
Moin.
Falls Du Dein Problem nicht schn selbst gelöst bekommen hast, die mal ein Wink mit dem Zaunpfahl:
<html>
<head>
<title>Meine Hobbys (Part II)</title>
</head>
<body>
<h1>Meine Hobbies sind...</h1>
<form name="frm">
<input type="checkbox" name="hobby1" value="Musik"> Musik <br>
<input type="checkbox" name="hobby2" value="Computer"> Computer <br>
<input type="checkbox" name="hobby3" value="Mathe"> Mathematik <br>
<input type="checkbox" name="hobby4" value="Lesen"> Lesen <br>
<input id="sport" type="checkbox" name="hobby5" value="Sport"> Sport <br>
<input type="checkbox" name="hobby6" value="Handball" onklick="check(this,'sport')"> Handball <br>^^^^^^
Das Attribut heißt 'onclick'!<br>
<input type="button" value="Zeige Hobbys..." onClick="auswertung()">
</form>
<script language="JavaScript">
<!--
function auswertung()
{
eingabe=""Dafür hat man Schleifen erfunden:
if (document.frm.hobby1.checked)
{
eingabe += "Musik \n";
}[...]
if (document.frm.hobby5.checked)
{
eingabe += "Sport \n";
}
if (document.frm.hobby6.checked)
{
eingabe += "Handball \nSport ";
dannAuchSport();
}Das kann man ersetzen durch
for(var i = 1; i <= 6; ++i) { var el = document.frm['hobby'+i]; if(el.checked) { if(i == 6) dannAuchSport(); eingabe += el.value + '\n'; } }alert(eingabe);
}
function dannAuchSport()
{
alert("Wenn Ihr Hobby Handball ist, dann auch Sport!");
}
function check(element, id)
{
var other = document.getElementById(id);
if (typeof(other) == 'object')
{
other.checked = element.checked;^^^^^^^^^^^^^^
hier brauchst duif(element.checked) other.checked = true;sonst wird auch 'Sport' immer deselektiert, wenn 'Handball' deselektiert wird!
}
}
//-->
</script>
</body>
</html>Ansonsten gehört language="JavaScript" in die Tonne und durch type="text/javascript" ersetzt. Die Kommentare um das Skript kann man sich übrigens auch sparen...
Christoph
-
-
-
geht leider nicht :(
und das andere scheint mir für unser niveau etwas zu hoch, sry...-
Mahlzeit,
geht leider nicht :(
"Geht nicht" ist keine hilfreiche Problembeschreibung - was steht in der Fehlerkonsole?
und das andere scheint mir für unser niveau etwas zu hoch, sry...
Naja, wenn Du Javascript programmieren willst, solltest Du Dich schon ein wenig <http://de.selfhtml.org/javascript/intro.htm@title=mit der Materie auseinandersetzen und auch lernbereit sein>.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
-
-
-