# Anzahl der Checkboxen auslesen



## petematz (29. Dez 2013)

Hallo,
ich bin recht neu hier und noch nicht allzu vertraut mit javascript.

Ich habe folgendes Problem.
Und zwar möchte ich folgendes sagen. " Wenn 8 Checkboxen aktiviert sind dann teile einen Wert durch 8)
Sind nur 7 aktiviert dann teile durch 7 usw. Sind nur 6 aktiv dann teile durch 6 usw. ...

Ich habe meinen 8 Checkboxen eine eigene ID vergeben. 
Dieses lese ich über if aus und dann folgt meine Rechnung.

Hier ein Beispiel, wie es derzeit aussieht. Ich vermute nur das ich da irgendwie auf dem falschen Weg bin oder?


```
<script type="text/javascript">
function calc ()
		{ 
		if (document.getElementById("cbw").checked == true && document.getElementById("cbm").checked == true && document.getElementById("cbme").checked == true && document.getElementById("cbg").checked == true && document.getElementById("cbwe").checked == true && document.getElementById("cbs").checked == true && document.getElementById("cbge").checked == true && document.getElementById("cbse").checked == true ) {
			var goldi =document.getElementById("goldeinsatz").value;
			var ehreeingabe = goldi/8;		
			document.getElementById("ehre").value=ehreeingabe;
		}
</script>
```

Mit Sicherheit gibt es da auch eine "bessere" Lösung wie ich die 8 Checkboxen einfacher auslesen kann, oder?

Wäre um Hilfe echt sehr erfreut.


----------



## DerBlaueBaum (30. Dez 2013)

Hallo,

ich habe mal schnell einen möglichen Beispiel Code geschrieben. Allerdings frage ich den Inhalt nicht über die ID ab, sondern über ein Formular.


```
<script type="text/javascript">
function teilen()
{
var nenner = 0;
for(i=0;i<document.check.teilen.length;i++)
{
if(document.check.teilen[i].checked)
{
nenner++;
}
}
alert(nenner)
}
</script>

<form name="check" action="javascript:teilen()">
<input type="checkbox" name="teilen" value="0">
<input type="checkbox" name="teilen" value="1">
<input type="checkbox" name="teilen" value="2">
<input type="checkbox" name="teilen" value="3">
<input type="checkbox" name="teilen" value="4">
<input type="checkbox" name="teilen" value="5">
<input type="checkbox" name="teilen" value="6">
<input type="checkbox" name="teilen" value="7">
<input type="submit" value="Abesenden">
</form>
```

Die Variable nenner gibt hierbei aus, wieviele Checkboxen aktiviert wurden. Die Values werden einfach fortlaufend nummeriert. Das Script erkennt automatisch, wieviele Checkboxen insgesamt verfügbar sind, sprich es können ohne weiteres neue Checkboxen hin zugefügt werden, wenn die Nummerierung stimmt


----------



## petematz (30. Dez 2013)

Hallo DerBlaueBaum,

vielen Dank das dir die Sache angesehen hast.

Was ist der Vorteil die Checkboxen über ein Formular auszugeben?

Ansonsten sollte der Code ja auch funktionieren wenn ich Ihn auf meine ID´s umschreiben oder ?

Ich setz hier mal den bisher gesamten Code rein:

Damit lässt es sich wohl auch besser nachvollziehen.

Im Prinzip soll zum Schluss folgendes passieren (das ganze ist für ein Spiel gedacht)

Der Nutzer gibt bei "Goldeinsatz" an wieviel Gold er für seine Bankettwaren ausgeben will.

Danach wählt er über die Checkboxen aus welche er kaufen möchte.

Dann gibt er unter "Preise / Mittelwerte" die "Max" und "Min" Werte ein.

Zum Schluss wird unter "Ehre" ausgegeben wieviel Ehre er für sein Gold theoretisch bekommen würde.






```
<html>
<head>
	<script type="text/javascript">
	
		function calc ()
		{ 
		if (document.getElementById("cbw").checked == true && document.getElementById("cbm").checked == true && document.getElementById("cbme").checked == true && document.getElementById("cbg").checked == true && document.getElementById("cbwe").checked == true && document.getElementById("cbs").checked == true && document.getElementById("cbge").checked == true && document.getElementById("cbse").checked == true ) {
			var goldi =document.getElementById("goldeinsatz").value;
			var ehreeingabe = goldi/8;		
			document.getElementById("ehre").value=ehreeingabe;
		}
	</script>	
</head>
<body>
<table width="650" align="center" border="1" style="background-color:#FFFFCC">
<tr align="center">
	<td>Goldeinsatz</td>
</tr>
<tr align="center">
	<td><input id="goldeinsatz" style="text-align: center;" type="text" name="name" size="5"></td>
</tr>
<tr align="center">
	<td>Steuer in %</td>
</tr>
<tr align="center">
	<td><input id="steuer" style="text-align: center;" type="text" name="name" size="2" value="25" readonly="readonly" ></td>
</tr>
</table><table width="650" align="center" border="1" style="background-color:#FFFFCC">
<tr align="center">
	<td>m&ouml;chte ich kaufen</td>
</tr>
</table>
<table width="650" align="center" border="1" style="background-color:#FFFFCC">
<tr align="center">
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/e/e3/Venison.png/50px-Venison.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/3/30/Furiture.png/50px-Furiture.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/3/3e/Metalware.png/50px-Metalware.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/2/28/Clothing.png/50px-Clothing.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/6/69/Wine.png/50px-Wine.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/7/77/Salt.png/50px-Salt.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/9/97/Spice.png/50px-Spice.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/8/83/Silk.png/50px-Silk.png"></td>
</tr>
<tr align="center">
	<td><input type="checkbox" id="cbw"></td>
	<td><input type="checkbox" id="cbm"></td>
	<td><input type="checkbox" id="cbme"></td>
	<td><input type="checkbox" id="cbg"></td>
	<td><input type="checkbox" id="cbwe"></td>
	<td><input type="checkbox" id="cbs"></td>
	<td><input type="checkbox" id="cbge"></td>
	<td><input type="checkbox" id="cbse"></td>
</tr>
</table>
<table width="650" align="center" border="1" style="background-color:#FFFFCC">
<tr align="center">
	<td>Pakete</td>
</tr>
</table>
<table width="650" align="center" border="1" style="background-color:#FFFFCC">
<tr align="center">
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/e/e3/Venison.png/50px-Venison.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/3/30/Furiture.png/50px-Furiture.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/3/3e/Metalware.png/50px-Metalware.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/2/28/Clothing.png/50px-Clothing.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/6/69/Wine.png/50px-Wine.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/7/77/Salt.png/50px-Salt.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/9/97/Spice.png/50px-Spice.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/8/83/Silk.png/50px-Silk.png"></td>
</tr>
<tr align="center">
	<td><input style="text-align: center;" type="text" name="name" size="1" value="50" readonly="readonly"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1" value="50" readonly="readonly"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1" value="50" readonly="readonly"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1" value="50" readonly="readonly"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1" value="20" readonly="readonly"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1" value="20" readonly="readonly"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1" value="20" readonly="readonly"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1" value="20" readonly="readonly"></td>
</tr>
</table>
<table width="650" align="center" border="1" style="background-color:#FFFFCC">
<tr align="center">
	<td>Preise / Mittelwert</td>
</table>
<table width="650" align="center" border="1" style="background-color:#FFFFCC">
<tr align="center">
	<td style="background-color:#eaf4fe" style="text-align: center;">Max</td>
	<td style="background-color:#eaf4fe" style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/e/e3/Venison.png/50px-Venison.png"></td>
	<td style="background-color:#eaf4fe" style="text-align: center;">Min</td>
	<td style="background-color:#ffddb7" style="text-align: center;">Max</td>
	<td style="background-color:#ffddb7" style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/3/30/Furiture.png/50px-Furiture.png"></td>
	<td style="background-color:#ffddb7" style="text-align: center;">Min</td>
	<td style="background-color:#eaf4fe" style="text-align: center;">Max</td>
	<td style="background-color:#eaf4fe" style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/3/3e/Metalware.png/50px-Metalware.png"></td>
	<td style="background-color:#eaf4fe" style="text-align: center;">Min</td>
	<td style="background-color:#ffddb7" style="text-align: center;">Max</td>
	<td style="background-color:#ffddb7" style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/2/28/Clothing.png/50px-Clothing.png"></td>
	<td style="background-color:#ffddb7" style="text-align: center;">Min</td>
</tr>
<tr align="center">
	<td style="background-color:#eaf4fe"><input id="wildmax" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#eaf4fe"><input id="wildmiddle" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#eaf4fe"><input id="wildmin" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#ffddb7"><input id="moebelmax" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#ffddb7"><input id="moebelmiddle" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#ffddb7"><input id="moebelmin" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#eaf4fe"><input id="metallmax" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#eaf4fe"><input id="metallmiddle" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#eaf4fe"><input id="metallmin" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#ffddb7"><input id="gewaendermax"style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#ffddb7"><input id="gewaendermiddle" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#ffddb7"><input id="gewaendermin" style="text-align: center;" type="text" name="name" size="1"></td>
</tr>
<tr align="center">
	<td style="background-color:#ffddb7" style="text-align: center;">Max</td>
	<td style="background-color:#ffddb7" style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/6/69/Wine.png/50px-Wine.png"></td>
	<td style="background-color:#ffddb7" style="text-align: center;">Min</td>
	<td style="background-color:#eaf4fe" style="text-align: center;">Max</td>
	<td style="background-color:#eaf4fe" style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/7/77/Salt.png/50px-Salt.png"></td>
	<td style="background-color:#eaf4fe" style="text-align: center;">Min</td>
	<td style="background-color:#ffddb7" style="text-align: center;">Max</td>
	<td style="background-color:#ffddb7" style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/9/97/Spice.png/50px-Spice.png"></td>
	<td style="background-color:#ffddb7" style="text-align: center;">Min</td>
	<td style="background-color:#eaf4fe" style="text-align: center;">Max</td>
	<td style="background-color:#eaf4fe" style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/8/83/Silk.png/50px-Silk.png"></td>
	<td style="background-color:#eaf4fe" style="text-align: center;">Min</td>
</tr>
<tr align="center">
	<td style="background-color:#ffddb7"><input id="weinmax" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#ffddb7"><input id="weinmiddle" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#ffddb7"><input id="weinmin" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#eaf4fe"><input id="salzmax" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#eaf4fe"><input id="salzmiddle" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#eaf4fe"><input id="salzmin" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#ffddb7"><input id="gewuerzemax" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#ffddb7"><input id="gewuerzemiddle" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#ffddb7"><input id="gewuerzemin" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#eaf4fe"><input id="seidemax"style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#eaf4fe"><input id="seidemiddle" style="text-align: center;" type="text" name="name" size="1"></td>
	<td style="background-color:#eaf4fe"><input id="seidemin" style="text-align: center;" type="text" name="name" size="1"></td>
</tr>
</table>
<table width="650" align="center" border="1" style="background-color:#FFFFCC">
<tr align="center">
	<td>zu kaufende Menge</td>
</tr>
</table>
<table width="650" align="center" border="1" style="background-color:#FFFFCC">
<tr align="center">
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/e/e3/Venison.png/50px-Venison.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/3/30/Furiture.png/50px-Furiture.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/3/3e/Metalware.png/50px-Metalware.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/2/28/Clothing.png/50px-Clothing.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/6/69/Wine.png/50px-Wine.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/7/77/Salt.png/50px-Salt.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/9/97/Spice.png/50px-Spice.png"></td>
	<td style="text-align: center;"><img src="http://hilfe.strongholdkingdoms.de/images/thumb/8/83/Silk.png/50px-Silk.png"></td>
</tr>
<tr align="center">
	<td><input style="text-align: center;" type="text" name="name" size="1"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1"></td>
	<td><input style="text-align: center;" type="text" name="name" size="1"></td>
</tr>
</table>



<table width="650" align="center" border="1" style="background-color:#FFFFCC">
<tr align="center">
	<td colspan="12">Ehre</td>
</tr>
<tr align="center">
	<td colspan="12"><input id="ehre" align="middle" style="text-align: center;" type="text" name="name" size="10"></td>
</tr>
</table>

<table align="center" >
<tr>
  	<td><input type="button" name="Name" value="Ehre berechnen" onClick="calc ()"/></td>
 	<td> <input type="reset" name="Name" value="Alles Zur&uuml;cksetzen"/></td>
</tr>
</table>
</body>
</html>
```


----------



## Unlikus (9. Jan 2014)

Gib den Checkboxen einfach eine class zb. gold_einsatz
Hier eine entsprechende jQuery Lösung
var counter=0;
$(".gold_einsatz").each(function(){
counter++;
});
Dieser zählt alle Elemente die die Classe gold_einsatz besitzen und wenn das nur deine Queckboxen sind, funktionert das auch.


----------



## petematz (9. Jan 2014)

Hallo Unlikus,
vielen dank ich werde es gleich mal probieren.


----------

