JavaScript: Checkboxen checken

  • #1
J

JuliusCaesar

Bekanntes Mitglied
Themenersteller
Dabei seit
19.05.2001
Beiträge
193
Reaktionspunkte
0
Ort
Bingen am Rhein
Hi zusammen,
ich habe ein kleines Projekt am laufen (geschäftlich). In diesem Projekt ist ein Test vorgesehen, bei dem man die Lösungen entweder per Radiobuttons oder Checkboxen anklicken kann. Nun möchte ich gerne ein externes JS zur Überprüfung der jeweiligen Antworten schreiben, welches für alle Fragen gültigkeit hat. Aber es können ja unterschiedliche Anzahlen Antworten richtig sein. Dieses JS soll auch die Möglichkeit bieten, dass ich den Test auflöse, also alle richtigen Markierungen setze. Bei den Radiobuttons ist das ja gar kein Problem mit Hilfe der ID, weil ich dort immer nur eine Anwort geben kann:
Code: 
HTML:
<input type=radio name=testAuswahl id=falsch>Falsch<br>
<input type=radio name=testAuswahl id=richtig value=Richtige Lösung>Richtig<br>
<input type=radio name=testAuswahl id=falsch>Falsch

<a href=javascript:solveRadio(document.makeTest.testAuswahl.richtig.value,true)>Auflösung anzeigen</a>
<a href=javascript:controlRadio('Test03.htm')>Nächste Lektion</a>

JS:
function controlRadio(nextLektion)
{if (document.makeTest.testAuswahl.richtig.checked)
{alert('Weiter zur nächsten Lektion.')
this.location.href = nextLektion
}
else
{alert('Leider falsch. Bitte noch einmal versuchen.')
this.location.href =->#'
}
}
function solveRadio(loesung,check)
{var text
var textTop =-><h2>Lösung:</h2>'
document.makeTest.testAuswahl.richtig.checked = check
text = textTop + loesung
document.getElementById('loesung').innerHTML = text
}
Da ich bei der CheckBox nicht mit einer ID arbeiten kann, stehe ich jetzt vor einem Problem. Ich weiß, dass ich neue Funktionen schreiben muss. Und ich hab auch schon eine Idee:
Code: 
HTML:
<input type=checkbox name=falsch>Falsch<br>
<input type=checkbox name=richtig1>Richtig<br>
<input type=checkbox name=richtig2>Richtig

<a href=javascript:solveCheckbox(2)>Auflösung anzeigen</a>
Die Zahl gibt die Anzahl der richtigen CheckBoxen an die Funktion weiter. Gibt es nun eine Möglichkeit, innerhalb des Ausdrucks document.makeTest.richtig.checked hinter das richtig einen Zähler zu setzen, damit ich die CheckBoxen richtig1 und richtig2 in einer For-Schleife ansprechen kann? Diese könnte ich ja dann mit der übergebenen Zahl variabel gestalten.

Oder hat jemand ein Vorschlag, wie ich das anders gestalten kann, ohne in jede CheckBox-HTML-Seite einen spezifischen JS-Code schreiben zu müssen?

P.S.: Der Code ist natürlich nur auszugsweise. ;D
 
  • #2
hhmm sowas... das einzige undynamische ist das man die anzahl der fragen angeben muss im formular. will man für value noch was andres einsetzen dann sollte man sich auf einen falschen wert festlegen z.b. das man wenn ein feld falsch ist immer 0 eingibt und dementsprechend die if anweisung ändert. [also dann && e.value == 1 zu && e.value != 0] hoffe das hilft dir

Code: 
<input type=checkbox name=frage1 value=1>Richtig<br>
<input type=checkbox name=frage1 value=1>Richtig<br>
<input type=checkbox name=frage1 value=0>Falsch <br><br>

<input type=checkbox name=frage2 value=1>Richtig<br>
<input type=checkbox name=frage2 value=0>Richtig<br>
<input type=checkbox name=frage2 value=1>Falsch

<input id=fragen value=2 style=display:none;>
<script language=Javascript>
<!--
function doit() {
  var fragen=document.getElementById(fragen).defaultValue;
  for(y=1;y<fragen+1;y++) {
     var e=document.getElementsByName(frage+y);
     for(var i=0;i<e.length;i++) {
       if(e[i].type ==->checkbox' && e[i].value == 1)
         e[i].checked='checked';
     }
   }
}
-->
</script>
<input type=button name= value=do it onClick=doit()></input>
 
  • #3
Hmm, das sieht auf den ersten Blick mal ziemlich so aus, als wäre ich da nie drauf gekommen. Aber ich werde das jetzt mal durchgehen, anpassen und testen.

Auf jeden Fall recht herzlichen Dank. ;)
 
  • #4
Erst einmal danke an Xeen. Dein Script funktioniert auf jeden Fall. :D

Ich habe jetzt nur gehofft, dass ich das etwas umbauen kann und hab das jetzt mal so versucht:
Code: 
<html>

<head>
<meta http-equiv=Content-Type content=text/html; charset=windows-1252>
<meta name=GENERATOR content=Microsoft FrontPage 4.0>
<meta name=ProgId content=FrontPage.Editor.Document>
<title>Testlektion 4</title>
<link rel=stylesheet type=text/css href=Style.css>
<script language=JavaScript src=ControlTest.js></script>
<script language=JavaScript>
<!--
function getAnswersCheckbox(anzahl)
{   var boxText =->';
   for(x = 0; x < anzahl; x++)
   {   var answers = document.getElementByName('testCheckbox' + x);
      for(i = 0; i < answers.length; i++)
      {   text += answers[i].value +-><br>;
      }
   }
   document.getElementById('answerBoxTable').innerHTML = boxText;
}
//-->
</script>
</head>

<body onload=getAnswersCheckbox(4)>

<form name=makeTest>
  <table border=0 width=100% height=100%>
    <tr>
      <td rowspan=2 width=300><img src=images/HNS12Front.gif alt=HNS 12 width=300 height=500></td>
      <td>
        <table border=0 cellpadding=15 width=100% height=100%>
          <tr height=65%>
            <td colspan=2>
              <h1>Testlektion 4</h1>
            </td>
          </tr>
          <tr>
            <td width=10%><input type=checkbox name=testCheckbox0 value=Richtige Antwort><br>
              <input type=checkbox name=testCheckbox1 value=Falsche Antwort><br>
              <input type=checkbox name=testCheckbox2 value=Falsche Antwort><br>
              <input type=checkbox name=testCheckbox3 value=Richtige Antwort></td>
            <td id=answerBoxTable></td>
          </tr>
          <tr>
            <td id=loesung colspan=2>
              <h2>Lösung:</h2>
              Hier erscheint die Lösung.</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td style=text-align:right; vertical-align:bottom><a href=Test03.htm>zurück</a>
        | <a href=javascript:void()>Auflösung anzeigen</a> | <a href=javascript:void()>Nächste
        Lektion</a> | <a href=Test04.htm>Weiter ohne Prüfung</a></td>
    </tr>
  </table>
</form>

</body>

</html>
Das Script soll die Values auslesen und in einer Tabelle ausgeben. Ich denke, wenn das hier läuft, bekomme ich das mit dem überprüfen - eigentliche Frage auch hin.
Leider funktioniert das nicht. :'( Der Debugger meldet:
Zeile: 16
Fehler: Nicht abgeschlossene Zeichenfolgekonstante
Zum Vergrößern anklicken....
und
Zeile: 25
Fehler: Objekt erwartet
Zum Vergrößern anklicken....
Kann mir einer weiterhelfen?
 
  • #5
Ich zitiere Mozilla:
Fehler: unterminated string literal
Quelldatei: file:///D:/hps/jstest.html
Zeile: 17, Spalte: 37
Quelltext:
{ text += answers.value +-><br>;
du hast die-> vergessen.

Jetzt sagt mir Mozilla:
Fehler: document.getElementByName is not a function
Quelldatei: file:///D:/hps/jstest.html
Zeile: 15

ich stimme zu, es muss document.getElementsByName heißen

gefixt sieht dein quellcode jetzt so aus:
Code: 
<html>

<head>
<meta http-equiv=Content-Type content=text/html; charset=windows-1252>
<meta name=GENERATOR content=Microsoft FrontPage 4.0>
<meta name=ProgId content=FrontPage.Editor.Document>
<title>Testlektion 4</title>
<link rel=stylesheet type=text/css href=Style.css>
<script language=JavaScript src=ControlTest.js></script>
<script language=JavaScript>
<!--
function getAnswersCheckbox(anzahl)
{   var boxText =->';
   for(x = 0; x < anzahl; x++)
   {   var answers = document.getElementsByName('testCheckbox' + x);
      for(i = 0; i < answers.length; i++)
      {   text += answers[i].value +-><br>';
      }
   }
   document.getElementById('answerBoxTable').innerHTML = boxText;
}
//-->
</script>
</head>

<body onload=getAnswersCheckbox(4)>

<form name=makeTest>
  <table border=0 width=100% height=100%>
    <tr>
      <td rowspan=2 width=300><img src=images/HNS12Front.gif alt=HNS 12 width=300 height=500></td>
      <td>
        <table border=0 cellpadding=15 width=100% height=100%>
          <tr height=65%>
            <td colspan=2>
              <h1>Testlektion 4</h1>
            </td>
          </tr>
          <tr>
            <td width=10%><input type=checkbox name=testCheckbox0 value=Richtige Antwort><br>
              <input type=checkbox name=testCheckbox1 value=Falsche Antwort><br>
              <input type=checkbox name=testCheckbox2 value=Falsche Antwort><br>
              <input type=checkbox name=testCheckbox3 value=Richtige Antwort></td>
            <td id=answerBoxTable></td>
          </tr>
          <tr>
            <td id=loesung colspan=2>
              <h2>Lösung:</h2>
              Hier erscheint die Lösung.</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td style=text-align:right; vertical-align:bottom><a href=Test03.htm>zurück</a>
        | <a href=javascript:void()>Auflösung anzeigen</a> | <a href=javascript:void()>Nächste
        Lektion</a> | <a href=Test04.htm>Weiter ohne Prüfung</a></td>
    </tr>
  </table>
</form>

</body>

</html>

allerdings kann ich nicht überprüfen ob dein script als gesamtes jetzt geht, zumindestens kommt bei laden kein fehler; über meine funktion hab ich drüber geschaut konnte keine fehler finden. Allerdings:
z13: var boxText =->';
z17: text += answers.value +-><br>';
ich weiß nicht ob das absicht ist, solltest du eventuell verbessern.
 
  • #6
Hallo Xeen, danke für die Hilfe.
Das mit dem s habe ich gerade auch bemerkt und wollte gerade editieren, dass sich das Problem erledigt hat. Aber du warst etwas schneller. :D
Die unterschiede boxText und text waren in meinem Script nit. Das hab ich nur versehentlich falsch hier rein zusammen kopiert. :-[

Jetzt habe ich nur ein Problem:
Ich will den Value der Checkboxen mit den Antworten füllen. Und dann funktioniert dein Script von oben leider nimmer. Werde das jetzt gleich mal mit einer ID bei den Checkboxen versuchen, aber wahrscheinlich klappt das nit, oder?
Falls nit, hast du dann ne andere Idee.

Ich will das deshalb so dynamisch und mit viel gemeinsamem Code machen, weil mein Chef sehr sprunghaft ist. Und so muss ich dann weniger ändern, wenn er wieder nen anderen Wunsch hat. ;)

[Edit]
Alles klar, das läuft jetzt alles so, wie ich mir das gedacht habe. Das mit der ID funktioniert doch. :) Vielen Dank für die super Unterstützung. Auf euch ist eben doch Verlass.
Falls es jemand interessiert, poste ich den Code noch nach. ;D
[/Edit]
 
  • #7
poste ihn und klcik dann unten links auf erledigt damit der fall abgehakt sit :)
 
  • #8
Sorry, hat etwas gedauert. Aber über das WE hatte ich den Code nit zur Hand. ;)

Code: 
HTML:
<html>

<head>
<meta http-equiv=Content-Type content=text/html; charset=windows-1252>
<meta name=GENERATOR content=Microsoft FrontPage 4.0>
<meta name=ProgId content=FrontPage.Editor.Document>
<title>Testlektion 2</title>
<link rel=stylesheet type=text/css href=Style.css>
<script language=JavaScript src=ControlTest.js></script>
<script language=JavaScript src=DynamicText.js></script>
</head>

<body onload=getAnswersCheck(4)>

<form name=makeTest>
 <table border=0 width=100% height=100%>
  <tr>
   <td rowspan=2 width=300><img src=images/HNS12Front.gif alt=HNS 12 width=300 height=500></td>
   <td>
    <table border=0 cellpadding=15 width=100% height=100%>
     <tr height=65%>
      <td colspan=2>
       <h1>Testlektion 2</h1>
       Welche Satzteile müssten unten im Feld Lösung: stehen, damit es einen Sinn ergibt?</td>
     </tr>
     <tr>
      <td width=10%><input type=checkbox name=testCheck0 id=richtig value=Hier stehen dann><br>
       <input type=checkbox name=testCheck1 id=falsch value=die falschen><br>
       <input type=checkbox name=testCheck2 id=falsch value=und><br>
       <input type=checkbox name=testCheck3 id=richtig value=die richtigen Antworten></td>
      <td id=answerTable></td>
     </tr>
     <tr>
      <td id=loesung colspan=2>
       <h2>Lösung:</h2>
       Hier erscheint die Lösung.</td>
     </tr>
    </table>
   </td>
  </tr>
  <tr>
   <td style=text-align:right; vertical-align:bottom><a href=Test01.htm>zurück</a>
     | <a href=javascript:solveCheck(4,'Test04.htm')>Auflösung anzeigen</a>
     | <a href=javascript:controlCheck(4,'Test04.htm')>Nächste Lektion</a>
     | <a href=Test02.htm>Weiter ohne Prüfung</a></td>
  </tr>
 </table>
</form>

</body>

</html>
Code: 
ControlTest.js:
<!--
var nextLektion;

function nextTest()
{ this.location.href = nextLektion;
}
function controlCheck(anzahl,lektion)
{ var allesKlar = true;
   nextLektion = lektion;
   for(x = 0; x < anzahl; x++)
   { var richtig = document.getElementsByName('testCheck' + x);
      for(z = 0; z < richtig.length; z++)
      { if((richtig[z].id ==->richtig' && !richtig[z].checked) || (richtig[z].id ==->falsch' && richtig[z].checked))
         { allesKlar = false;
         }
      }
   }
   if(allesKlar)
   { alert('Weiter zur nächsten Lektion.');
      nextTest();
   }
   else
   { alert('Leider falsch. Bitte noch einmal versuchen.');
      this.location.href =->#';
   }
}
function solveCheck(anzahl,lektion)
{ var text =-><h2>Lösung:</h2>Die richtige Lösung lautet:<br>';
   nextLektion = lektion;
   for(x = 0; x < anzahl; x++)
   { var richtig = document.getElementsByName('testCheck' + x);
      for(z = 0; z < richtig.length; z++)
      { if(richtig[z].id ==->richtig')
         { richtig[z].checked =->checked';
            text += richtig[z].value +-><br>';
         }
      }
   }
   document.getElementById('loesung').innerHTML = text;
   setTimeout('nextTest()',5000);
}
// -->
Code: 
DynamicText.js:
<!--
function getAnswersCheck(anzahl)
{ var text =->';
   for(x = 0; x < anzahl; x++)
   { var answers = document.getElementsByName('testCheck' + x);
      for(z = 0; z < answers.length; z++)
         text += answers[z].value +-><br>';
   }
   document.getElementById('answerTable').innerHTML = text;
}
//-->
 
Thema:

JavaScript: Checkboxen checken

ANGEBOTE & SPONSOREN

Neueste Themen

Statistik des Forums

Themen
113.840
Beiträge
707.965
Mitglieder
51.494
Neuestes Mitglied
Flensburg45
Oben