mehrere Inputboxen per Javascript ausschalten
0 
Der Martin
0 
Matti Maekitalo
0 0 0 0 0 Der Martin
0 0 Der Martin
0 0 Matti Maekitalo
0 0
0
mehrere Inputboxen per Javascript ausschalten
Hi,
über eine Checkbox möchte ich gern viele (insgesamt 40 weitere Inputboxen und Checkboxen) de- und aktivieren können. Gibt es hier eine verkürzte Schreibweise bzw. Tricks damit die Size von der Javascript Funktion nicht all zu groß wird?
Ein kleines Beispiel der Javascript-Funktion.
function setstate(field)
{
if(document.form1.checkb1.checked == true)
{
document.form1.input1.disabled = document.form1.input2.disabled = document.form1.input3.disabled = document.form1.input4.disabled = true;
}
else
{
document.form1.input1.disabled = document.form1.input2.disabled = document.form1.input3.disabled = document.form1.input4.disabled = false;
}
}
gibt es eine Art Container wie ein <div> welches man per Javascript ansprechen kann und dieses und dessen Inhalte einfach de- bzw. aktiviert?
<body>
<form name="form1" action="#" method="post" enctype="application/x-www-form-urlencoded" id="form">
<!-- die checkbox -->
<input type="checkbox" onclick="setstate(this)" id="checkb1" name="checkb1" style="background:none;"/>active
<!-- div container ausschalten / einschalten ?!? -->
<div>
<inputbox1 ...>
<inputbox2 ...>
<inputbox3 ...>
<inputbox4 ...>
</div>
</form>
</body>
Gruß
Johannes
-
Hallo,
über eine Checkbox möchte ich gern viele (insgesamt 40 weitere Inputboxen und Checkboxen) de- und aktivieren können. Gibt es hier eine verkürzte Schreibweise bzw. Tricks damit die Size von der Javascript Funktion nicht all zu groß wird?
ja, eine Schleife über die gesuchten Elemente.
if(document.form1.checkb1.checked == true)
"Ist es wahr, dass document.form1.checkb1.checked wahr ist?"
Einen boolschen Wert, der nur true oder false sein kann, nochmal explizit mit true zu vergleichen, nur um dann wiederum true oder false herauszubekommen, ist sinnlos. Ein einfachesif (document.form1.checkb1.checked)
erfüllt denselben Zweck und ist besser lesbar.
if(document.form1.checkb1.checked == true)
{
document.form1.input1.disabled = document.form1.input2.disabled = document.form1.input3.disabled = document.form1.input4.disabled = true;
}
else
{
document.form1.input1.disabled = document.form1.input2.disabled = document.form1.input3.disabled = document.form1.input4.disabled = false;
}Noch dazu, da die if-Abfrage hier überflüssig ist. Du willst mehrere igenschaften auf denselben Wert setzen wie document.form1.checkb1.checked - dazu musst du keine Fallunterscheidung treffen:
document.form1.input1.disabled = document.form1.input2.disabled = document.form1.input3.disabled = document.form1.input4.disabled = document.form1.checkb1.checked;
Bewirkt dasselbe wie deine if-Abfrage mit ihren zwei nahezu gleichen Anweisungen.
gibt es eine Art Container wie ein <div> welches man per Javascript ansprechen kann und dieses und dessen Inhalte einfach de- bzw. aktiviert?
Klar. Du kannst z.B. getElementsByTagName() auch auf ein form- oder div-Element anwenden und bekommst so eine Collection der gesuchten Elemente *in* diesem form oder div, über die du dann iterieren kannst.
So long,
Martin--
PCMCIA: People Can't Memorize Computer Industry Acronyms
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Tach auch.
Klar. Du kannst z.B. getElementsByTagName() auch auf ein form- oder div-Element anwenden und bekommst so eine Collection der gesuchten Elemente *in* diesem form oder div, über die du dann iterieren kannst.
Oder, wenn auch unerwünschte Elemente mit dem selben Tag-Namen da sind, sowas wie getElementsByClassName .. je nach Browser-Stand den implementierten, selbst implementieren, oder z.B. jquery dafür nutzen.
Bis die Tage,
Matti -
Hi
Klar. Du kannst z.B. getElementsByTagName() auch auf ein form- oder div-Element anwenden und bekommst so eine Collection der gesuchten Elemente *in* diesem form oder div, über die du dann iterieren kannst.
getElementById wird hier wahrscheinlich passend sein, da ich mehree divs im html code besitze. Wie bekomme ich die Anzahl der Items in einem solchen div heraus?
Muss ich den exakten Pfad für das <div id="rahmen"> angeben oder sucht die Funktion getElementById sowieso das ganze html script nach der angegebenen Id ab?
//für <div id="rahmen"></div> var length = document.form1.getElementById("rahmen"); for(int i=0; i<length; i++) { document.form1.getElementById("rahmen")[i].disabled = true; }Gruß
Johannes-
Hi,
Klar. Du kannst z.B. getElementsByTagName() auch auf ein form- oder div-Element anwenden und bekommst so eine Collection der gesuchten Elemente *in* diesem form oder div, über die du dann iterieren kannst.
getElementById wird hier wahrscheinlich passend sein, da ich mehree divs im html code besitze.
Aber nicht mit gleicher ID, oder? Das wäre nämlich nicht erlaubt.
Wie bekomme ich die Anzahl der Items in einem solchen div heraus?
Die getElementsBy-Methoden liefern eine NodeList, und die hat auch eine length-Eigenschaft,
Muss ich den exakten Pfad für das <div id="rahmen"> angeben oder sucht die Funktion getElementById sowieso das ganze html script nach der angegebenen Id ab?
So etwas wie einen „Pfad“, innerhalb dessen gesucht würde, gibt es bei getElementById nicht - weil die ID wie oben gesagt dokumentweit eindeutig sein *muss*, und die Methode auch nur document zur Verfügung steht.
Bei den getElementsBy-Methoden ist das anders - die kannst du, wie Martin schon schrieb, auf so gut wie jedem beliebigen HTML-Elementobjekt aufrufen.
//für <div id="rahmen"></div>
var length = document.form1.getElementById("rahmen");for(int i=0; i<length; i++)
{
document.form1.getElementById("rahmen")[i].disabled = true;
}Das ist mehrfacher Hinsicht Unfug. ID muss eindeutig sein, getElementById ist eine Methode von document, und eine length-Eigenschaft hat der Rückgabewert auch nicht, weil er keine NodeList ist, sondern entwede rein konkretes HTML-Elementobjekt, oder null. MfG ChrisB -- RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
//für <div id="rahmen"></div>
var length = document.form1.getElementById("rahmen");for(int i=0; i<length; i++)
{
document.form1.getElementById("rahmen")[i].disabled = true;
}> > Das ist mehrfacher Hinsicht Unfug. > ID muss eindeutig sein, > getElementById ist eine Methode von document, > und eine length-Eigenschaft hat der Rückgabewert auch nicht, weil er keine NodeList ist, sondern entwede rein konkretes HTML-Elementobjekt, oder null. aber es muss doch eine Möglichkeit geben, die Anzahl der sich in diesem div befindlichen Inputboxen etc. zu bekommen? gut: document.form1.getElementById("rahmen"); liefert mir ein Handle auf eine Liste von allen Elementen in diesem div; wie kann ich mich jetzt durchsteppen, so dass ich alle disabled darstellen kann? Ich dachte das würde über einen Index gehen... getElementById("rahmen")[index]-
Hi,
aber es muss doch eine Möglichkeit geben, die Anzahl der sich in diesem div befindlichen Inputboxen etc. zu bekommen?
Natürlich gibt es die - bspw. mit getElementsByTagName.
gut: document.form1.getElementById("rahmen"); liefert mir ein Handle auf eine Liste von allen Elementen in diesem div
Nein, tut es nicht!
Warum, habe ich dir bereits zu erklären versucht - bitte versuche auch, das, was dir hier erklärt wird, zu *verstehen*!
Und in SELFHTML hat es auch Erklärungen und Beispiele dazu.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Hallo,
aber es muss doch eine Möglichkeit geben, die Anzahl der sich in diesem div befindlichen Inputboxen etc. zu bekommen?
ja, natürlich. Sagte ich doch bereits.
gut: document.form1.getElementById("rahmen"); liefert mir ein Handle auf eine Liste von allen Elementen in diesem div
Nein. Es liefert dir eine Referenz auf genau dieses ein div-Element.
Und jetzt kannst du *innerhalb dieses div-Elements* mit getElementsByTagName() oder, wie Matti vorschlug, mit getElementsByClassName(), auf die Kindelemente dieses div zugreifen.Ich dachte das würde über einen Index gehen...
Ja. Aber der ergibt erst einen Sinn, wenn du eine Methode benutzt, die auch potentiell mehrere Elemente liefern könnte. Das tut getElementById() auf keinen Fall.
Ciao,
Martin--
Nein, es ist nicht wahr, dass bei der Post Beamte schneller befördert werden als Pakete.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hi,
gut: document.form1.getElementById("rahmen"); liefert mir ein Handle auf eine Liste von allen Elementen in diesem div
Nein. Es liefert dir eine Referenz auf genau dieses ein div-Element.
Nein, tut's auch nicht.
Wenn document.form1 ein Formular-Elementobjekt ist, hat dieses keine Methode getElementById (sofern sie ihm nicht explizit verpasst worden wäre).
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hallo,
gut: document.form1.getElementById("rahmen"); liefert mir ein Handle auf eine Liste von allen Elementen in diesem div
Nein. Es liefert dir eine Referenz auf genau dieses ein div-Element.
Nein, tut's auch nicht.
Wenn document.form1 ein Formular-Elementobjekt ist, hat dieses keine Methode getElementById (sofern sie ihm nicht explizit verpasst worden wäre).da hast du auch wieder Recht. So genau hab ich mir die Anweisung gar nicht angesehen.
Ciao,
Martin--
Zwei Politiker auf dem Weg zum Sitzungssaal: "Was sagten Sie in ihrer Rede neulich noch zur Rentenreform?" - "Nichts." - "Ja, schon klar. Aber wie haben Sie es formuliert?"
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
function setout(field) { var items = document.getElementById("rahmen").getElementsByTagName("input"); if (field.checked) { for (var i = 0; i < items.length; i++) items[i].disabled = false; } else { for (var i = 0; i < items.length; i++) items[i].disabled = true; } }funktionieren tut es schon mal - aber vielleicht kennt ihr noch ein paar Möglichkeiten die Codesize zu verkleinern; den Coder kompakter zu schreiben.
Johannes
-
Tach auch.
if (field.checked) {
for (var i = 0; i < items.length; i++)
items[i].disabled = false;
}
else {
for (var i = 0; i < items.length; i++)
items[i].disabled = true;
}> > funktionieren tut es schon mal - aber vielleicht kennt ihr noch ein paar Möglichkeiten die Codesize zu verkleinern; den Coder kompakter zu schreiben. Es stand schon im allerersten Posting: lass die Fallunterscheidung weg und setzte `disabled`{:.language-javascript} direkt auf den Wert `field.checked`{:.language-javascript} (bzw. dessen Negation mit `! field.checked`{:.language-javascript}: schon hast du 5 Zeilen gespart. Bis die Tage, Matti -- [Webapplikationen in C++ entwickeln](http://tntnet.org/) -
Hi,
funktionieren tut es schon mal - aber vielleicht kennt ihr noch ein paar Möglichkeiten die Codesize zu verkleinern; den Coder kompakter zu schreiben.
In etwa so:
function setout(field) { var items = document.getElementById("rahmen").getElementsByTagName("input"); for (var i=0, l=items.length; i<l; i++) { // damit muss items.length nicht bei jedem Durchlauf erneut ausgewertet werden items[i].disabled = !field.checked; // darauf, dass die checked-Eigenschaft schon einen boole'schen Wert liefert, // wurde ja bereits hingewiesen. Negierung per ! davor, weil du ja bei angekreuzter Checkbox disabled auf false setzen willst, // und anders herum } }Man könnte jetzt auch noch field.checked vorher in einer Variablen ablegen, damit das nicht jedes mal ausgewertet werden muss.
Stattdessen könnte man aber auch beim Aufruf der Funktion gleich den Wert der Checked-Eigenschaft der (/einer) Checkbox übergeben.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Tach auch.
»» for (var i=0, l=items.length; i<l; i++) { // damit muss items.length nicht bei jedem Durchlauf erneut ausgewertet werdenGrundsätzlich ist mir klar, was du damit erreichen willst. Nur stellt sich mir die Frage, ob die Eigenschaft length einer NodeList tatsächlich jedesmal ausgewertet wird (was dann ja in O(N) laufen würde) oder ob sie nicht eh schon fest gespeichert ist und nur aktualisiert wird (daraus resultiert dann O(1)). Wenn letzteres der Fall wäre, dann wäre der Zusatzschreibaufwand vernachlässigbar, u.U. wäre es sogar langsamer (wenn die NodeList sehr klein ist).
Hast du eine Idee, wie das in den einzelnen Browsern realisiert ist? Oder wo man solche Browser-Interna nachschlagen könnte?
Bis die Tage,
Matti-
Hi,
»» for (var i=0, l=items.length; i<l; i++) { // damit muss items.length nicht bei jedem Durchlauf erneut ausgewertet werden
> > Grundsätzlich ist mir klar, was du damit erreichen willst. Nur stellt sich mir die Frage, ob die Eigenschaft length einer NodeList tatsächlich jedesmal ausgewertet wird (was dann ja in O(N) laufen würde) oder ob sie nicht eh schon fest gespeichert ist und nur aktualisiert wird (daraus resultiert dann O(1)). Grundsätzlich haben NodeLists per Definition „live“ zu sein, d.h. Änderungen im DOM müssen sie sofort widerspiegeln. Sofern man also im DOM nichts macht, ist die Frage berechtigt, ob und wann erneute Lesezugriffe stattfinden müssen. Kommt dann aber auch darauf an, wie man „nichts“ definiert. Das Ändern des checked-Values ist im Grunde auch schon eine Änderung, die sich bis ins DOM hinein auswirkt, schließlich wird eine Eigenschaft eines DOM-Objektes geändert. Wenn ich also weiß, dass ich im DOM nichts mache, was sich auf die Anzahl der Elemente innerhalb einer NodeList auswirkt - dann mache ich das immer so, dass ich mir diese Anzahl vorher ein mal ermittle und in einer Variablen zwischenspeichere. (Den anderen Fall gibt's ja auch - dass du innerhalb der Schleife Operationen im DOM machst, die sich auf die aktuelle NodeList auswirken. Dann bleibt dir manchmal gar keine andere Wahl, als die Anzahl jedes Mal auszuwerten.) > Hast du eine Idee, wie das in den einzelnen Browsern realisiert ist? Oder wo man solche Browser-Interna nachschlagen könnte? Zu beidem: Nicht wirklich. Da die JavaScript-Engines aktueller Browsergenerationen aber in letzter Zeit stark optimiert wurden und auch weiter werden, ist es wohl so, dass es in der Realität nicht allzu viel ausmacht, ob man nun so oder so vorgeht. Ich habe es mir jedenfalls angewöhnt, die Zahl der Lesezugriffe auf Eigenschaften zu minimieren, weil auch objekt.eigenschaft zu lesen jedes Mal etwas mehr Aufwand verursacht, als einen Wert direkt aus einer Variablen abzufragen. Das ist letztendlich Mikro-Optimierung, ja. Aber bei JavaScript ist die immer noch relevanter, als in anderen Sprachen wie bspw. PHP. MfG ChrisB -- RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
Moin!
funktionieren tut es schon mal - aber vielleicht kennt ihr noch ein paar Möglichkeiten die Codesize zu verkleinern; den Coder kompakter zu schreiben.
Aber natürlich:
function setout(a){var b=document.getElementById("rahmen").getElementsByTagName("input");if(a.checked){for(var i=0;i<b.length;i++)b[i].disabled=false}else{for(var i=0;i<b.length;i++)b[i].disabled=true}}liefert der Javascript Code-Compressor. Allerdings finde ich, dass die Lesbarkeit geringfügig leidet.
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix
-
-
-
-
-
-
-
-
-
Moin!
gibt es eine Art Container wie ein <div> welches man per Javascript ansprechen kann und dieses und dessen Inhalte einfach de- bzw. aktiviert?
Hm.
Variante 1: Du kannst ein Spam-Element darum bauen und dessen Kind-Elemente untersuchen, ob es Checkboxen sind und entsprechend reagieren.
Variante 2: document.forms['wasauchimmer'] enthält bereits ein Array von Kindelementen
Die kannst Du auch durchhecheln.
Variante 3: Du baust Dir einen Array mit den Elementen.
<script type="text/javascript"> // Variante 3 checkboxes=new Array ('foo', 'bar'); function deaktivieren(checkboxes) { for (i=0; i < checkboxes.length; i++) { document.getElementById(checkboxes[i]).checked=false; } } function aktivieren(checkboxes) { for (i=0; i < checkboxes.length; i++) { document.getElementById(checkboxes[i]).checked=true; } } // Variante 2 function deaktivierenForm() { for (i=0; i < document.forms['test'].length; i++) { document.forms['test'][i].checked=false; } } function aktivierenForm() { for (i=0; i < document.forms['test'].length; i++) { document.forms['test'][i].checked=true; } } </script><form name="test"> <input type="checkbox" name="foo" id="foo" value="foo" /> foo<br /> <input type="checkbox" name="bar" id="bar" value="bar" /> bar<br /> Variante 3: <input type="button" onclick="aktivieren(checkboxes)" value="alle aktivieren"><input type="button" onclick="deaktivieren(checkboxes)" value="alle deaktivieren"><br /> Variante 2: <input type="button" onclick="aktivierenForm()" value="alle aktivieren"><input type="button" onclick="deaktivierenForm()" value="alle deaktivieren"> </form>MFFG (Mit freundlich- friedfertigem Grinsen)
fastix
-
Hallo,
Variante 1: Du kannst ein Spam-Element darum bauen
ein Spam-Element? Pfui, das wollen wir gar nicht haben!
*scnr*
Martin--
Du kannst dem Leben nicht mehr Tage geben.
Aber dem Tag mehr Leben.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo,
Variante 1: Du kannst ein Spam-Element darum bauen
ein Spam-Element? Pfui, das wollen wir gar nicht haben!
*scnr*
MartinErm ich glaube das war kein Tippfehler, sondern fastix hat genau das gemeint: "Element, welches keinen (semantischen) Zweck erfüllt" = Spam-Element.
--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
-
-