Newbiefrage Checkboxen

#1

Hallo,

ich hoffe mal, dass ich hier richtig bin. Leider kenne ich mich gar
nicht aus mit Javascript, habe aber folgenden Code

<table>
<tr><td><input type="checkbox" name="master[]" value="xy01"></
td><td>xy01</td><td><input type="checkbox" name="raucher[]"
value="xy01"></td><td><input type="checkbox" name="es1[]"
value="xy01"></td><td><input type="checkbox" name="es2[]"
value="xy01"></td><td></tr>
<tr><td><input type="checkbox" name="master[]" value="xy02"></
td><td>xy02</td><td><input type="checkbox" name="raucher[]"
value="xy02"></td><td><input type="checkbox" name="es1[]"
value="xy02"></td><td><input type="checkbox" name="es2[]"
value="xy02"></td><td></tr>
<tr><td><input type="checkbox" name="master[]" value="xy03"></
td><td>xy03</td><td><input type="checkbox" name="raucher[]"
value="xy03"></td><td><input type="checkbox" name="es1[]"
value="xy03"></td><td><input type="checkbox" name="es2[]"
value="xy03"></td><td></tr>
</table>

Und folgende Anforderung.
In jeweils einer Zeile stehen ja vier Checkboxen nebeneinander.
1. Wenn die erste Checkbox (master) einer Zeile nicht angehakt ist,
dann sollen die anderen Checkboxen der Zeile (raucher, es1 & es2)
nicht anhakbar und "nicht gecheckt" sein
2. Wenn die erste Checkbox angehakt wird, sollen die beiden Checkboxen
es1 und es2 automatisch angehakt sein (man soll sie aber auch
deaktvieren dürfen)
das ganze natürlich nur pro Zeile....

Geht das überhaupt?
Danke schon mal
Micha

#2

Quote:

Geht das überhaupt?
Danke schon mal
Micha

Ja klar geht das.

Ich habe Dir das mal für die zweite Zeile gebaut.
Den Rest solltest Du selber rausfinden.

<script type="text/javascript">
function Modi(art) {
if ( !(document.FORM1.b1.checked) ) {
document.FORM1.b2.checked = false;
document.FORM1.b3.checked = false;
document.FORM1.b4.checked = false;
}
if ( (document.FORM1.b1.checked) && ( art ==1 ) ) {
document.FORM1.b2.checked = true;
document.FORM1.b3.checked = true;
}
}
</script>
<body onload="Modi()">
<form action="weg_zum_Server.pl" method="post" name="FORM1" id="FORM1">
<table>
<tr>
<td><input type="checkbox" name="a1" value="1"></td>
<td>xy01</td>
<td><input type="checkbox" name="a2" value="1"></td>
<td><input type="checkbox" name="a3" value="1"></td>
<td><input type="checkbox" name="a4" value="1"></td>
</tr>
<tr>
<td><input type="checkbox" name="b1" value="1" onchange="Modi(1)"></td>
<td>xy02</td>
<td><input type="checkbox" name="b2" value="1" onchange="Modi(0)"></td>
<td><input type="checkbox" name="b3" value="1" onchange="Modi(0)"></td>
<td><input type="checkbox" name="b4" value="1" onchange="Modi(0)"></td>
</tr>
<tr>
<td><input type="checkbox" name="c1" value="1"></td>
<td>xy03</td>
<td><input type="checkbox" name="c2" value="1"></td>
<td><input type="checkbox" name="c3" value="1"></td>
<td><input type="checkbox" name="c4" value="1"></td>
</tr>
</table>
</form>
</body>

#3

Jürgen Hoffmann wrote:

Quote:

Geht das überhaupt?
Danke schon mal
Micha

Ja klar geht das.

Geht was? http://lernst.de/zitieren/kriegst.de/antworten

Quote:

Ich habe Dir das mal für die zweite Zeile gebaut.
Den Rest solltest Du selber rausfinden.

script type="text/javascript"
function Modi(art) {

Bezeichner, die keine Konstruktoren oder Konstanten referenzieren, sollten
nicht mit einem Grossbuchstaben beginnen.

Quote:

if ( !(document.FORM1.b1.checked) ) {

if (document.forms["FORM1"].elements["b1"].checked)
{

Quote:

document.FORM1.b2.checked = false;

Hier fe lt mindestens noch

document.forms["FORM1"].elements["b2"].disabled = true;

denn:

Quote:

dann sollen die anderen Checkboxen [...]
nicht anhakbar [...] sein

document.FORM1.b3.checked = false;
document.FORM1.b4.checked = false;
}
if ( (document.FORM1.b1.checked) && ( art ==1 ) ) {

else if (art == 1)

genügt. Was nicht `false' ist, ist automagisch `true'. Diese grundlegende
Tautologie der booleschen Algebra sollte ein Programmierer aber bereits
verinnerlicht haben.

Quote:

document.FORM1.b2.checked = true;
document.FORM1.b3.checked = true;
}
}

Besser ist:

function modi(f, art)
{
var es = f.elements;
if (es["b1"].checked)
{
es["b3"].checked = es["b4"].checked = false;
}
else if (art == 1)
{
es["b2"].checked = es["b3"].checked = true;
}
}

Du hast jedoch mit Deinem Code eine andere Frage beantwortet als die, welche
vom OP gestellt wurde.

Quote:

/script
body onload="Modi()"

<body onload="modi(document.forms[0])">

Zum blossen Setzen der checked-Eigenschaftist das jedoch überflüssig, da man
einfach das checked-Attribut verwenden kann. Interessant wird dieser Ansatz
erst, wenn man barrierefrei die Steuerelemente nur mit Script *deaktiviert*
(d.h. die disabled-Eigenschaft statt des disabled-Attributs verwendet).

Quote:

form action="weg_zum_Server.pl" method="post" name="FORM1" id="FORM1"

Das Formular braucht weder Name noch ID, wenn man die Formularreferenz übergibt.

Quote:

td><input type="checkbox" name="b1" value="1" onchange="Modi(1)"></td

Quote:

[...]
td><input type="checkbox" name="b4" value="1" onchange="Modi(0)"></td

Das change-Ereignis ist jedoch spezifiziert und erwiesenermassen ein
ungeeignetes Ereignis, um den Status einer Checkbox nach der Änderung
auszuwerten. Besser ist das click-Ereignis, also hier das onclick-Attribut.
Das click-Ereignis blubbert ausserdem in allen bekannten DOMs, so dass es
nicht nötig ist, das Attribut bei jedem Element zu setzen.

http://www.w3.org/TR/DOM-Level-2-Events/events.htm

Bitte die vom Newsreader automatisch erzeugte Einleitungszeile nicht
entfernen: http://einklich.net/usenet/usenet1.htm ff.

PointedEars
--
[FrontPage] Dann wechsle schnellstens zu Notpatsch.echse, dann mußt Du
alle Buchstaben selber eingeben und Dir auch bei jedem überlegen, ob
der dahingehört bzw. weggelassen werden kann.
(Georg Maaß in dcljs <b57nm8$25hka6$1 (AT) ID-3551 (DOT) news.dfncis.de>)

#4

Hallo,

ich danke Euch beiden erst mal für Eure Antworten.
Folgendes Problem hätte ich aber noch:
Leider habe ich - wie auch in meinem Beispiel - pro Zeile Checkboxen,
die den gleichen Namen habe (master, raucher, es1,es2), die jeweils
als Array sich nur in der Eigenschaft value unterscheiden. Wie mache
ich das denn bei Arrays mit dem Skript?

Nebenbei habe ich noch ein bischen gegoogelt und bin dabei auf
getElementById gestossen - könnte mir das helfen? Wenn ich
beispielsweise die ID der Checkbox auf den Value-Wert setze?
....<td><input type="checkbox" name="es1[]" value="xy02"
id="xy02" >.....
setze - wäre das ein Ansatz zur Lösung mit den gleichnamigen
Checkboxnamen?

Danke schon mal!
Micha

#5

Michael Fana wrote:

Quote:

Leider habe ich - wie auch in meinem Beispiel - pro Zeile Checkboxen,
die den gleichen Namen habe (master, raucher, es1,es2), die jeweils
als Array sich nur in der Eigenschaft value unterscheiden. Wie mache
ich das denn bei Arrays mit dem Skript?

Steuerelemente in einem Formular, die den gleichen Namen haben, werden im
DOM als Elemente in einer Array-*ähnlichen* Datenstruktur abgebildet, einer
Knotenliste (NodeList). Die Elemente der Liste können über ihren Index
referenziert werden und die Liste hat eine length-Eigenschaft, welche die
Anzahl der Elemente in der Liste angibt.

function modi(f, s)
{
var es = f.elements;

// ...

/*
* Annahme:
* Es gibt mehrere Steuerelemente dieses Namens vom gleichen Typ
*/
var o = es["foo"];

// für alle Steuerelemente gleichen Namens, in umgekehrter Reihenfolge
for (var i = o.length; i--

{
// ... o[i] ...
}
}

Mit der derzeitigen Benennung wird die Programmierung jedoch sehr aufwändig,
auch serverseitig.

Quote:

Nebenbei habe ich noch ein bischen gegoogelt und bin dabei auf
getElementById gestossen - könnte mir das helfen? Wenn ich
beispielsweise die ID der Checkbox auf den Value-Wert setze?
....<td><input type="checkbox" name="es1[]" value="xy02"
id="xy02" >.....
setze - wäre das ein Ansatz zur Lösung mit den gleichnamigen
Checkboxnamen?

IDs verkomplizieren das Problem nur, machen den operierenden Script-Code
ineffizienter und erfordern DOM Level 1+, während Du mit Namen schon mit
"DOM Level 0" auskommst, welches aus der Anfangszeit des DOM-Scriptings
(NN3/IE3) stammt und daher die beste Unterstützung bei Benutzerprogrammen
geniesst. Gleichzeitig ist die explizite Form der Referenzierung aus DOM
Level 0 auch standardkonform per DOM Level 2 HTML, und somit die
bestmögliche Lösung für Formulare.

PointedEars

#6

Gregor Kofler wrote:

Quote:

[...] Eine id darf nur einmal pro Dokument vorkommen. Deshalb heisst die
Methode auch getElementById() vs. etwa getElementsByName(). Ersteres
liefert ein einzelnes Element, zweiteres alle Elemente mit identem Namen
in einer Collection. Wenn also nach deiner Idee zwei Elemente idente
Werte haben, dann ist auch ihre id ident. Umständlicher geht's kaum.
Bleib bei name und iteriere durch die Collection.

Ein Beispiel hier:
http://de.selfhtml.org/javascript/ob...ements_by_name

gEBN() ist jedoch für Formularsteuerelemente inkompatibler Overkill.

PointedEars

#7

Zum Beispielcode von Michael Fana ein Frage:

Quote:

tr><td><input type="checkbox" name="master[]" value="xy01"></

Ist "master[]" ein gültiger Identifier? Ich dachte eigentlich, dass hier nur
alphanumerische Zeichen erlaubt sind?

Ist irgendwo festgelegt, welche Zeichen in "name"-Attributen zulässig
sind?

LG, Ferry
--

#8

Gregor Kofler wrote:

Quote:

Thomas 'PointedEars' Lahn meinte:
Gregor Kofler wrote:
http://de.selfhtml.org/javascript/ob...ements_by_name
gEBN() ist jedoch für Formularsteuerelemente inkompatibler Overkill.

Ja form.elements tut's auch. Von der "Inkompatibilität" sind aber wohl
nur prä-5.5 IEs und NS 4.x betroffen, oder?

Alle weniger bekannten und unbekannten UAs, die DOM Level 1+ HTML nicht
implementieren, einschliesslich die von Dir genannten.

PointedEars
--

Quote:

[Stehlen von Links durch Manipulation der Statuszeile verhindern]
Vielleicht solltest du in diesem Fall dir das Ganze mit dem WWW noch mal

überlegen und statt dessen Landschaftsgärtner, Busfahrer oder so was
ähnliches werden. (Philip Steffan in dcljs <3DD3FEC7.5090309 (AT) lunique (DOT) de>)

#9

Gregor Kofler wrote:

Quote:

Ferry Bolhar meinte:
Zum Beispielcode von Michael Fana ein Frage:

tr><td><input type="checkbox" name="master[]" value="xy01"></
Ist "master[]" ein gültiger Identifier?

Das spielt im Markup keine Rolle, da das name-Attribut von input-Elementen
vom Typ CDATA ist. Da kann also buchstäblich alles Mögliche stehen.

Problematisch wird es nur, wenn man proprietäre Referenzierung für das
Elementobjekt verwendet, da dann tatsächlich aufgrund der
Punkt-Eigenschaftszugriff-Syntax der Elementname ein Bezeichner sein muss:

document.myform.myelement[]

ist ungültig, da `[' und `]' bereits für die
Klammer-Eigenschaftszugriff-Syntax reserviert sind.

Verwendet man jedoch die standardkonforme Referenzierung über Collections,
ist das kein Problem:

document.forms["myform"].elements["myelement[]"]

Quote:

Ich dachte eigentlich, dass hier nur alphanumerische Zeichen erlaubt sind?

Du dachtest fchsla.

Quote:

Es ist unmöglich PHP (und vielleicht auch anderen serverseitigen
Skripts) Arrays (die praktisch zu verarbeiten sind) anders zu übergeben.
Möchte man dies durch n unterschiedliche Namen W3C konform erledigen,
dann wird es serverseitig umständlich und fehlerträchtig.

Non sequitur. Die Klammern sind natürlich "W3C konform".

Quote:

Bislang hat mein Validator noch nie solche Namen bemängelt.

Udiags, denn dann würde er die (X)HTML-DTD(s) ignorieren.

Quote:

Ist irgendwo festgelegt, welche Zeichen in "name"-Attributen zulässig
sind?

Ja. Hier:
http://www.w3.org/TR/html401/types.html#type-cdata

"...NAME tokens must begin with a letter ([A-Za-z]) and may be followed
by any number of letters, digits ([0-9]), hyphens ("-"), underscores
("_"), colons (":"), and periods (".")."

Richtiges Zitat im falschen Kontext. Der URL hat mit dem Zitat nichts zu
tun, und der in Frage kommende Attributwert ist gerade _nicht_ vom Typ NAME.
BTW: Liest man die Spezifikation genauer, stellt man fest, dass das für die
wenigsten name-Attribute gilt:

http://www.w3.org/TR/html4/index/attributes.html

HTH

PointedEars
--
Snowboarder können gar kein JavaScript. Sie klicken in Dreamweaver
'was zusammen und glauben, das sei "Programmieren".

-- Andreas Hollmann in dciwam

#10

Quote:

IDs verkomplizieren das Problem nur, machen den operierenden Script-Code
ineffizienter und erfordern DOM Level 1+, während Du mit Namen schon mit
"DOM Level 0" auskommst, welches aus der Anfangszeit des DOM-Scriptings
(NN3/IE3) stammt und daher die beste Unterstützung bei Benutzerprogrammen
geniesst. Gleichzeitig ist die explizite Form der Referenzierung aus DOM
Level 0 auch standardkonform per DOM Level 2 HTML, und somit die
bestmögliche Lösung für Formulare.

? - leider sagt mir das alles gar nichts :-(

Um bei diesem Thread mal auf meine Frage zurückzukommen - gibt es eine
Möglichkeit das zu realisieren, und wenn ja, welche?
Danke
Micha