Using javascript and checkbox to add

JavaScript
1

Hi Guys,

I am looking for a javascript function that adds together a total based on how many checkboxes are checked.

For example, here are some checkboxes:


<input type="checkbox" name="jobad[]" value="{$values[i].id}" checked>
<input type="checkbox" name="jobad[]" value="{$values[i].id}" checked>
<input type="checkbox" name="jobad[]" value="{$values[i].id}" checked>
<input type="checkbox" name="jobad[]" value="{$values[i].id}">

Each checkbox will be worth 29.99, so the total as shown above would be 89.97. So basically when each checkbox is checked it should add 29.99 to the total and if it is unchecked it should subtract 29.99 from the total.

Any ideas on how to do this?

2 

<script type="text/javascript">

function calculate() {
var el, i = 0;
var total = 0;
var number = 29.99;
while(el = document.getElementsByName("chk")[i++]) {
if(el.checked) { total= total + number;}
}
alert(total);
}
</script>

<input type="checkbox" name="chk" onclick="calculate()">
<input type="checkbox" name="chk" onclick="calculate()">
<input type="checkbox" name="chk" onclick="calculate()">
<input type="checkbox" name="chk" onclick="calculate()">
  

  
<script type="text/javascript">

function calculate() {
var el, i = 0;
var total = 0;
while(el = document.getElementsByName("chk")[i++]) {
if(el.checked) { total= total + Number(el.value);}
}
alert(total);
}
</script>

<input type="checkbox" name="chk" value="29.99" onclick="calculate()">
<input type="checkbox" name="chk" value="29.99" onclick="calculate()">
<input type="checkbox" name="chk" value="29.99" onclick="calculate()">
<input type="checkbox" name="chk" value="29.99" onclick="calculate()">
3

is it possible to display the total on the page instead of via a alert box?

4

Yes. Check this out.

5

I guess you need to implement change listener to the checkboxes also. So when user click on any checkboxes, you update the number of checked items.

6 

<script type="text/javascript">

function calculate() {
var el, i = 0;
var total = 0;
var number = 29.99;
while(el = document.getElementsByName("chk")[i++]) {
if(el.checked) { total= total + number;}
}
// alert(total);
var div = document.getElementById('divid');
div.innerHTML = "Total : " +total ;
}
</script>

<input type="checkbox" name="chk" onclick="calculate()">
<input type="checkbox" name="chk" onclick="calculate()">
<input type="checkbox" name="chk" onclick="calculate()">
<input type="checkbox" name="chk" onclick="calculate()">
<div id="divid" style="color:red;"></div>
  


<script type="text/javascript">

function calculate() {
var el, i = 0;
var total = 0;
while(el = document.getElementsByName("chk")[i++]) {
if(el.checked) { total= total + Number(el.value);}
}
//alert(total);
var div = document.getElementById('divid');
div.innerHTML = "Total : " +total ;
}
</script>

<input type="checkbox" name="chk" value="29.99" onclick="calculate()">
<input type="checkbox" name="chk" value="29.99" onclick="calculate()">
<input type="checkbox" name="chk" value="29.99" onclick="calculate()">
<input type="checkbox" name="chk" value="29.99" onclick="calculate()">
<div id="divid" style="color:red;"></div>