nicht angemeldet
gruss matze,
ich hab folgendes Problem:
Ich möchte eine Javascriptfunktion, mit der ich alle Checkboxen
eines Forms aktivieren kann, auf allen Seiten standardmäßig einbauen==> Gar kein Problem.
Nun sind die Formnamen nicht fest vorgegeben, ...
...
1.) wie kann ich feststellen, wieviel forms existieren?
2.) wie kann ich die Fromnamen vergleichen?
um diese informationen muss sich ein unabhaengig arbeitendes script
gar nicht erst bemuehen, da jedes formular-element in einem validen
html-dokument ueber die eigenschaft [form] auf sein es umschliessendes
formular-element zeigt.
ein universeller ansatz, der sich des generischen array-iterators [forEach]
bedient, koennte dann so aussehen, wobei der initialisierungsprozess jederzeit
im mitgebendem funktionsumfang erweitert werden kann:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>toggle-all-checkboxes-of-a-certain-form-universal-approach.html</title>
<style type="text/css">
~~~~~~css
form {
clear: left;
margin-bottom: 20px;
}
form fieldset input {
clear: left;
float: left;/*
display: inline;\*/
}
form fieldset label {
display: block;
}
~~~html
</style>
<script type="text/javascript">
~~~javascript
if (typeof Array.forEach != "function") { // [[link:http://developer.mozilla.org/en/docs/New_in_JavaScript_1.6#Array_and_String_generics]]
Array.forEach = function (obj, fct) { // [[link:http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:forEach]]
if (typeof fct == "function") {
var i, l = (((obj instanceof Array) || ((typeof obj.length == "number") && ((typeof obj.item == "function") || (typeof obj.item == "object") || (typeof obj.item == "string") || (obj instanceof window.NodeList) || (obj instanceof window.HTMLCollection)))) ? (obj.length) : (0));
for (i=0; i<l; ++i) {
fct.call(null, (obj[i] || obj.item(i)), i, obj);
}
}
};
}
(function () {
var enableCheckboxToggles = (function () {
Array.forEach(document.forms, (function (elm/*, idx, arr*/) { // [elm] : [HTMLFormElement]
Array.forEach(elm.elements, (function (elm, idx, arr) { // [elm]#2 : [HTMLInputElement]
if ((elm.type == "checkbox") && (elm.className == "toggle")) {
elm.onclick = (function () { // [elm]#2
var self = this; // [self] === [this] === [elm]#2
setTimeout((function () {
Array.forEach(self.form.elements, (function (elm/*, idx, arr*/) { // [elm]#3 : [HTMLInputElement]
if (elm !== self) { // ([elm]#3 !== [elm]#2) ?
elm.checked = self.checked;
}
}));
}), 50);
});
}
}));
}));
});
if (window.addEventListener) {
window.addEventListener("load", enableCheckboxToggles, false);
} else if (window.attachEvent) {
window.attachEvent("onload", enableCheckboxToggles);
}
delete arguments.callee; // den kompletten initialisierungsprozess wegschmeissen
})();
~~~html
</script>
</head>
<body>
<form action="#" method="get">
<fieldset>
<legend>Toggle 01</legend>
<input type="checkbox" id="item0000"><label for="item0000">item 01</label>
<input type="checkbox" id="item0001"><label for="item0001">item 02</label>
<input type="checkbox" id="item0002"><label for="item0002">item 03</label>
<input type="checkbox" id="item0003"><label for="item0003">item 04</label>
<input type="checkbox" id="item0004"><label for="item0004">item 05</label>
</fieldset>
<input type="checkbox" class="toggle" id="toggle00"><label for="toggle00">check/uncheck boxes above</label>
</form>
<form action="#" method="get">
<fieldset>
<legend>Toggle 02</legend>
<input type="checkbox" id="item0100"><label for="item0100">item 01</label>
<input type="checkbox" id="item0101"><label for="item0101">item 02</label>
<input type="checkbox" id="item0102"><label for="item0102">item 03</label>
<input type="checkbox" id="item0103"><label for="item0103">item 04</label>
<input type="checkbox" id="item0104"><label for="item0104">item 05</label>
</fieldset>
<input type="checkbox" class="toggle" id="toggle01"><label for="toggle01">check/uncheck boxes above</label>
</form>
<form action="#" method="get">
<fieldset>
<legend>Toggle 03</legend>
<input type="checkbox" id="item0200"><label for="item0200">item 01</label>
<input type="checkbox" id="item0201"><label for="item0201">item 02</label>
<input type="checkbox" id="item0202"><label for="item0202">item 03</label>
<input type="checkbox" id="item0203"><label for="item0203">item 04</label>
<input type="checkbox" id="item0204"><label for="item0204">item 05</label>
</fieldset>
<input type="checkbox" class="toggle" id="toggle02"><label for="toggle02">check/uncheck boxes above</label>
</form>
</body>
</html>
eigenwerbung: [»DOM-getter und array-iteratoren - scripte schneller entwickeln«](http://forum.de.selfhtml.org/archiv/2007/3/t148291/#m962147)
so long - peterS. - pseliger@gmx.net
--
»Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive.« - [Douglas Crockford](http://javascript.crockford.com/)
[ie:( fl:) br:> va:( ls:& fo:) rl:) n3;} n4:} ss:} de:µ js:} mo:? zu:\]](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%28+fl%3A%29+br%3A%3E+va%3A%28+ls%3A%26+fo%3A%29+rl%3A%29+n3%3B%7D+n4%3A%7D+ss%3A%7D+de%3A%B5+js%3A%7D+mo%3A%3F+zu%3A%5D)