vinkjes tellen

Hang aan ieder vinkje een bepaalde class, bijvoorbeeld de class "tellen"

Vervolgens een stukje jquery:

var counter=0;
$(.tellen).foreach({
   counter++;
});

Roep dit aan wanneer de pagina geladen is of voordat je de pagina verlaat, net zoals je zelf wilt.

LET OP, ik heb niet getest of dit werkt zo maar het zal je aardig de juiste richting op sturen.

<script lang="JavaScript">
function Tel()
{
var aantal_vinkjes = 0;
for(var i=1; i<=3; i++)
{
if(document.getElementById('Lid_aanwezig-'+i).checked)
{
aantal_vinkjes++;
}
}
alert("aangevinkt "+aantal_vinkjes);
}

</script>
<form>
<input id="Lid_aanwezig-1" type="checkbox" name="Lid_aanwezig-1" title="1" value="1" onclick="Tel()"/>
<input id="Lid_aanwezig-2" type="checkbox" name="Lid_aanwezig-2" title="2" value="2" onclick="Tel()"/>
<input id="Lid_aanwezig-3" type="checkbox" name="Lid_aanwezig-3" title="3" value="3" onclick="Tel()"/>
</form>

@Wim
Er ontbreken een aantal accolades in de if-else construct

@pipo
jquery heeft geen functie foreach, en TS gebruikt geen jQuery.

Het idee om met classes te werken is echter wel goed ;-) :
[code lang="js"]
<form>
<input type="checkbox" name="Lid[]" value="1" onchange="Tel()" class="cb">
<input type="checkbox" name="Lid[]" value="2" onclick="Tel()" class="cb">
<input type="checkbox" name="Lid[]" value="3" onclick="Tel()" class="cb">
</form>
Aangevinkt: <span id="aan"></span>
Uitgevinkt: <span id="uit"></span>
<script lang="JavaScript">
function Tel()
{
var aantal_aan = 0;
var aantal_uit = 0;
var boxlist = document.getElementsByClassName("cb");
for(i=0; i<boxlist.length; i++) {
if(boxlist[i].checked) {
aantal_aan++;
}
else {
aantal_uit++;
}
}
document.getElementById("aan").innerHTML = aantal_aan.toString();
document.getElementById("uit").innerHTML = aantal_uit.toString();
}
</script>[/code]

Tja, wat ik nu niet snap:
Ik heb mijn voorbeeld uit een basiscursus Javascript gehaald (versie 1.2 sorry) Wat is er dan zo verkeerd aan. Dat stukje script snapte ik maar waarom het niet werkt.... er zijn meerdere wegen naar Rome.

Is het "te oude" JavaScript? Ik bedoel, is het niet meer geldig? Sorry dat ik zo lastig ben.

Wim van de Wetering op 09/12/2014 14:22:29

function Tel(box)
{
if (box.checked)
alert("aangevinkt"+ aantal_vinkjes);
var aantal_vinkjes++;
else
alert("afgevinkt"+ aantal_vinkjes);
var aantal_vinkjes--;
}

Gebruik in Firefox =>Ontwikkelaar=>Webconsole dan had je zelf de errors gezien.
Zo doet ie het:

function Tel(box)
{
	if(box.checked)
	{
		aantal_vinkjes++;
	}
	else
	{
		aantal_vinkjes--;
	}
	alert("afgevinkt "+ aantal_vinkjes);
}

Deze werken:
<input type="checkbox" name="Lid_aanwezig-1" title="1" value="1" onchange="Tel(this)"/>
<input type="checkbox" name="Lid_aanwezig-2" title="2" value="2" onclick="Tel(this)"/>

En deze niet want dat is voor <select>
<input type="checkbox" name="Lid_aanwezig-3" title="3" value="3" onselect="Tel(this)"/>

Okée!
Dank jullie wel!
Ik kan weer even vooruit!

Ik kon inderdaad goed vooruit! Ik snap nu ook het deel
"document.getElementById("aan").innerHTML = aantal_aan.toString();"

Weer wat geleerd!