seos2k: checkboxen nicht alle auswählen

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

  1. 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

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
  2. 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

    1. 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

      --
      sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
      1. 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

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|