checkboxen nicht alle auswählen
seos2k
- javascript
Hallo,
habe folgendes Problem:
wie kann ich die Eigenschaften von Checkboxen in einem Formular so festlegen, oder was für eine Art von Funktion braucht man, damit man sagen wir von 5 Checkboxen nur 3 auswählen kann?
Danke im vorraus, Rudolf
Mahlzeit seos2k,
wie kann ich die Eigenschaften von Checkboxen in einem Formular so festlegen,
Gar nicht.
oder was für eine Art von Funktion braucht man, damit man sagen wir von 5 Checkboxen nur 3 auswählen kann?
Du könntest jeder dieser Checkboxen (die sinnvollerweise in irgendeiner Form <http://de.selfhtml.org/html/attribute/allgemeine.htm#uebersicht@title=ein gemeinsames Kriterium> besitzen bzw. <http://de.selfhtml.org/formulare/strukturieren.htm#gruppieren@title=zusammengehörend gruppiert> sind) <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick@title=einen passenden Eventhandler> spendieren, in dem eine Funktion aufgerufen wird, die wiederum überprüft, ob die von Dir gewünschten Kriterien erfüllt sind und je nach Ergebnis die Checkboxen entsprechend <http://de.selfhtml.org/javascript/objekte/elements.htm#checked@title=anhakt oder nicht>.
MfG,
EKKi
Ja, die antwort hat mir nicht soviel geholfen, habe nun diese methode gefunden
<html>
<head>
<title>HTML - Test</title>
<script type="text/javascript" language="JavaScript">
function CountChecks(which) {
var maxchecked = 3;
var count = 0;
if(document.F1.R.checked == true) { count++; }
if(document.F1.G.checked == true) { count++; }
if(document.F1.B.checked == true) { count++; }
if(document.F1.Y.checked == true) { count++; }
if(document.F1.P.checked == true) { count++; }
if(document.F1.O.checked == true) { count++; }
if(count > maxchecked) {
eval('document.F1.' + which + '.checked = false');
}
}
</script>
</head>
<body>
<form name="F1">
Select up to three:<br />
<input type="checkbox" name="R" value="red" onClick="CountChecks('R')" />Red <br />
<input type="checkbox" name="G" value="green" onClick="CountChecks('G')" />Green <br />
<input type="checkbox" name="B" value="blue" onClick="CountChecks('B')" />Blue <br />
<input type="checkbox" name="Y" value="yellow" onClick="CountChecks('Y')" />Yellow <br />
<input type="checkbox" name="P" value="purple" onClick="CountChecks('P')" />Purple <br />
<input type="checkbox" name="O" value="orange" onClick="CountChecks('O')" />Orange <br />
</form>
</body>
</html>
kennt jemand einen noch simpleren weg oder kann das ganze hier noch vereinfachen? bin unerfahren und hab nicht die zeit mich komplett einzuarbeiten
Mahlzeit seos2k,
Ja, die antwort hat mir nicht soviel geholfen,
Warum nicht? Hast Du die verlinkten Abschnitte von SELFHTML gelesen? Hast Du sie auch verstanden? Was sind Deine konkreten Probleme bei der Umsetzung?
if(document.F1.R.checked == true) { count++; }
if(document.F1.G.checked == true) { count++; }
if(document.F1.B.checked == true) { count++; }
if(document.F1.Y.checked == true) { count++; }
if(document.F1.P.checked == true) { count++; }
if(document.F1.O.checked == true) { count++; }
Das ist zwar nicht falsch, aber doch unelegant. Redundanter Code ist zu vermeiden. Redundanter Code ist zu vermeiden.
if(count > maxchecked) {
eval('document.F1.' + which + '.checked = false');
"eval() is evil!" - immer! Ganz besonders jedoch, wenn es absolut überflüssig ist. Wie in diesem Fall.
Mit <http://de.selfhtml.org/javascript/objekte/elements.htm@title=Schema 4> könntest Du viel eleganter auf das von Dir gewünschte Formularelement zugreifen. Noch besser wäre allerdings, wenn Du statt des Namens des aktuellen Elements einfach eine Referenz darauf an die Funktion übergibst:
<script type="text/javascript">[code lang=javascript]
function CountChecks(chk) {
// Übergabeparameter ist eine Referenz auf die angeklickte Checkbox
var max = 3;
var count = 0;
for (var i = 0; i < chk.form.elements.length; i++) {
// Einmal durch alle Elemente des zur angeklickten Checkbox gehörenden Formulars laufen
var elm = chk.form.elements[i];
// Wenn es sich um eine Checkbox mit der gleichen Klasse wie die angeklickte Checkbox handelt, soll geprüft werden, ob sie schon angekreuzt ist
if (elm && (elm.nodeName = 'INPUT') && (elm.type = 'checkbox') && (elm.className = chk.className) && elm.checked) {
count++;
}
}
if (count > max) {
chk.checked = false;
}
}
</script>
[...]
<form>
<input type="checkbox" name="R" id="R" value="red" class="color" onclick="CountChecks(this);"><label for="R">Red</label>
<input type="checkbox" name="G" id="G" value="green" class="color" onclick="CountChecks(this);"><label for="G">Green</label>
<input type="checkbox" name="B" id="B" value="blue" class="color" onclick="CountChecks(this);"><label for="B">Blue</label>
<input type="checkbox" name="Y" id="Y" value="yellow" class="color" onclick="CountChecks(this);"><label for="Y">Yellow</label>
<input type="checkbox" name="P" id="P" value="purple" class="color" onclick="CountChecks(this);"><label for="P">Purple</label>
<input type="checkbox" name="O" id="O" value="orange" class="color" onclick="CountChecks(this);"><label for="O">Orange</label>
</form>[/code]
kennt jemand einen noch simpleren weg oder kann das ganze hier noch vereinfachen? bin unerfahren und hab nicht die zeit mich komplett einzuarbeiten
Ausnahmsweise mal - Du solltest das Einarbeiten aber dringend nachholen.
MfG,
EKKi
Mahlzeit EKKi,
if (elm && (elm.nodeName = 'INPUT') && (elm.type = 'checkbox') && (elm.className = chk.className) && elm.checked) {
Das muss latürnich
if (elm && (elm.nodeName == 'INPUT') && (elm.type == 'checkbox') && (elm.className == chk.className) && elm.checked) {
heißen. Da war mein Klickfinger wieder schneller als die Augen ...
MfG,
EKKi