Brauche Hilfe bei Dynamisierung...

wissenwill

wissenwill

Grünschnabel
Hi,

würde folgendes script gerne etwas dynamischer umschreiben:

HTML: 
<html>
<head>
<title>checkbox chooser</title>
<script language="javascript">
function chkBoxProc (fld) {
    var val1 = fld.form.chk1.checked;
    var val2 = fld.form.chk2.checked;
    var val3 = fld.form.chk3.checked;
    
    var msg = 'None checked';
    
    if (val1 && val2 && val3) {
        msg = 'Checked 1, 2 and 3';
    }
    else if (val1 && val2) {
        msg = 'Checked 1, 2 ';
    }
    else if (val1 && val3) {
        msg = 'Checked 1, 3 ';
    }
    else if (val2 && val3) {
        msg = 'Checked 2, 3 ';
    }
    else if (val1 ) {
        msg = 'Checked 1';
    }
    else if (val2 ) {
        msg = 'Checked 2';
    }
    else if (val3 ) {
        msg = 'Checked 3';
    }
    document.getElementById ('msg').innerHTML = msg;
}
</script>
</head>
<body>
<form name="form1">
<input type="checkbox" name="chk1" value="1" onclick="chkBoxProc(this);">Check Option 1
<input type="checkbox" name="chk2" value="2" onclick="chkBoxProc(this);">Check Option 2
<input type="checkbox" name="chk3" value="3" onclick="chkBoxProc(this);">Check Option 3
<div id="msg"></div>
</form>
</body>
</html>
Insgesamt habe ich allerdings 10 checkboxen, dafür alle Möglichkeiten in das Script händisch einzutragen würde mich ca. 3 wochen kosten, abgesehen davon welcher aufwand entstehen würde, wenn später dann mal wieder eine oder zwei checkboxen rausfliegen...

Hatte an arrays gedacht - nur leider verstehe ich diese Dinger grad ma so gaar nicht, wer kann mir behilflich sein?

Danke!
-w
 
Hi,

Du könntest zum Beispiel ein Array erstellen, in dem die Namen aller Checkboxen eingetragen sind, die
geprüft werden sollen. In der Funktion durchläufst Du dieses Array, prüfst ob die jeweils aktuelle Box gesetzt ist
und gestaltest entsprechend die Ausgabe.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var arrFelder = new Array("chk_0", "chk_1", "chk_2", "chk_3", "chk_4",
                          "chk_5", "chk_6", "chk_7", "chk_8", "chk_9");

function theTest(objCheckBox){
  var strOut = "";

  for(var i=0; i<arrFelder.length; i++){
    if(objCheckBox.form.elements[arrFelder[i]].checked) strOut += arrFelder[i]+", ";
  }

  document.getElementById("outID").innerHTML = strOut;
}
</script>
</head>
<body>
<form name="form1" action="" method="get">
<div>
  <input type="checkbox" name="chk_0" value="0" onclick="theTest(this);">Check Option 0
  <input type="checkbox" name="chk_1" value="1" onclick="theTest(this);">Check Option 1
  <input type="checkbox" name="chk_2" value="2" onclick="theTest(this);">Check Option 2
  <input type="checkbox" name="chk_3" value="3" onclick="theTest(this);">Check Option 3
  <input type="checkbox" name="chk_4" value="4" onclick="theTest(this);">Check Option 4
  <input type="checkbox" name="chk_5" value="5" onclick="theTest(this);">Check Option 5
  <input type="checkbox" name="chk_6" value="6" onclick="theTest(this);">Check Option 6
  <input type="checkbox" name="chk_7" value="7" onclick="theTest(this);">Check Option 7
  <input type="checkbox" name="chk_8" value="8" onclick="theTest(this);">Check Option 8
  <input type="checkbox" name="chk_9" value="9" onclick="theTest(this);">Check Option 9
</div>
<div id="outID"></div>
</form>
</body>
</html>
Ciao
Quaese
 
Cool! Deine Lösung gefällt mir richtig gut!

Meine Überlegungen (mit selfhtml-Hilfe) gingen hier hin:

HTML: 
var flds  = "chk1,chk2,chk3,chk4".split(",")
var vals  = new Array(2,4,8,16)
var msgs  = new Array();

msgs[0]   = 'None checked';

msgs[2]   = '1 checked';

msgs[4]   = '2 checked';
msgs[6]   = '2 & 1 checked';

msgs[8]   = '3 checked';
msgs[10]  = '3 & 1 checked';
msgs[12]  = '3 & 2 checked';
msgs[14]  = '3 & 2 & 1 checked';

msgs[16]  = '4 checked';
msgs[18]  = '4 & 1 checked';
msgs[20]  = '4 & 2 checked';
msgs[22]  = '4 & 2 & 1 checked';
msgs[24]  = '4 & 3 checked';
msgs[26]  = '4 & 3 & 1 checked';
msgs[28]  = '4 & 3 & 2 checked';
msgs[30]  = '4 & 3 & 2 & 1 checked';

function chkBoxProc (fld) {
  var val = 0;
  for (i=0;i<flds.length;i++) {
    val += (fld.form.elements[flds[i]].checked)?vals[i]:0;
  }
  document.getElementById ('msg').innerHTML = msgs[val];

}
Wenn ich das bis zur 10 checkbox so weiter geführt hätte, na denn Prost!:-)

Perfekt!

Danke & Gruß!
-w
 
Eine Frage hab ich grad ma noch :-)

Wenn checkbox 1 den gleichen Wert hat wie zum Beispiel checkbox 3 oder 4, wie bekomme ich es hin, das nur ein Wert in der Ausgabe angezeigt wird?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück