How do I edit this code to also count the checkboxes checked and total values

[jason.lex]

I have a code which counts and display the total values of the checkboxes.
However, I would also like to count the total checkboxes checked and the total values for each section beside the combined total. Is there anyway to do this?

Here is the fiddle link:
JSfiddle

 

[feherke]

Hi

Generally you can do it in 2 ways :
[ul]
[li]Use separate container nodes for each section and mark them with some specific attribute holding the section information :

[b]<table>[/b]
[b]<tbody[/b] [highlight][maroon]data-section[/maroon][teal]=[/teal][i][green]"1"[/green][/i][/highlight][b]>[/b]
[b]<tr>[/b]
[b]<td>[/b]Section I[b]</td>[/b]
[b]<td><input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"checkbox"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"personal"[/green][/i] [maroon]id[/maroon][teal]=[/teal][i][green]"30m"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"80"[/green][/i][b]></td>[/b]
[b]</tr>[/b]
[b]</tbody>[/b]
[b]<tbody[/b] [highlight][maroon]data-section[/maroon][teal]=[/teal][i][green]"2"[/green][/i][/highlight][b]>[/b]
[b]<tr>[/b]
[b]<td>[/b]Section II[b]</td>[/b]
[b]<td><input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"checkbox"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"team"[/green][/i] [maroon]id[/maroon][teal]=[/teal][i][green]"30m14"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"100"[/green][/i][b]></td>[/b]
[b]</tr>[/b]
[b]</tbody>[/b]
[b]</table>[/b]

See it in action :

http://jsfiddle.net/re75ho92/4/

[/li]
[li]Mark each checkbox with some specific attribute holding the section information :

[b]<table>[/b]
[b]<tbody>[/b]
[b]<tr>[/b]
[b]<td>[/b]Section I[b]</td>[/b]
[b]<td><input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"checkbox"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"personal"[/green][/i] [maroon]id[/maroon][teal]=[/teal][i][green]"30m"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"80"[/green][/i] [highlight][maroon]data-section[/maroon][teal]=[/teal][i][green]"1"[/green][/i][/highlight][b]></td>[/b]
[b]</tr>[/b]
[b]<tr>[/b]
[b]<td>[/b]Section II[b]</td>[/b]
[b]<td><input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"checkbox"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"team"[/green][/i] [maroon]id[/maroon][teal]=[/teal][i][green]"30m14"[/green][/i] [maroon]value[/maroon][teal]=[/teal][i][green]"100"[/green][/i] [highlight][maroon]data-section[/maroon][teal]=[/teal][i][green]"2"[/green][/i][/highlight][b]></td>[/b]
[b]</tr>[/b]
[b]</tbody>[/b]
[b]</table>[/b]

See it in action :

http://jsfiddle.net/re75ho92/5/

[/li]
[/ul]
Although the JavaScript of the 2[sup]nd[/sup] solution is simpler, I would prefer the 1[sup]st[/sup] one because as long the checkboxes are grouped, future extension ( either by more sections or more checkboxes ) will require fewer changes.


Feherke.
feherke.github.io

 

[vacunita]

Not the most optimized, but something like this works and can be used for future sections easily, by just changing the checkbox names. Though feherke's solution is more elegant.

function updateTotal(e) {
    var form = this.form;
    [b]countPersonal();[/b]
    var val = parseFloat(form.elements['price_total'].value);
    if (this.checked) {
      val += parseFloat(this.value);
    } else {
      val -= parseFloat(this.value);
    }
    form.elements['price_total'].value = formatDecimal(val);
  }
  
  function countPersonal()
  {
    var persChecks = document.getElementsByName('personal');
    var sectNum = document.getElementById('section1_num');
    var price = document.getElementById('price_team2');
    var chkd = 0;
    for(x in persChecks)
    {
    	if(persChecks[x].checked)
      {
      	chkd++;
      }
    }
    sectNum.value = chkd;
    price.value = chkd*80;
  }

You can do the same thing for the second section.


----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

 

[jason.lex]

Thank you for the solutions and the tips. I will take a closer look at all the mentioned methods.
Much appreciated.