Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
Solved

# Totalling up check boxes

Posted on 2004-10-30
Medium Priority
133 Views
I have the following code, and would basically like to calculate a total for the checkboxes checked. I cant use the value= part of the field because this holds a unique ID for the item.

So I was thinking of doing an "onclick add 15 to total field" type thing. Can anyone help me do this, and also recalculate the total when teh checkbox is unchecked?

<form name="form1" method="post" action="">
<p>
<input name="item[]" type="checkbox" id="item[]" value="1">
Item 1<br>
<input name="item[]" type="checkbox" id="item[]" value="2">
Item 2<br>
<input name="item[]" type="checkbox" id="item[]" value="3">
Item 3</p>
<p>Total
<input type="text" name="textfield">
</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>
0
Question by:fox_statton
[X]
###### Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

• Help others & share knowledge
• Earn cash & points
• 4
• 3

LVL 13

Expert Comment

ID: 12454187
Shouldn't you be using the id property for a unique id?
0

Author Comment

ID: 12454252
Oh... wait.. you might actually be right...
0

Author Comment

ID: 12454286
Just looked at it, the value has to be the ID so that I can process it using PHP and Arrays.

Ive made some progress, Im using:

<script type="text/javascript">

function reCalc(v, b)
{
var sp = document.getElementById ('total');
if (!b) v = - v;
var t = parseInt(sp.innerHTML);
sp.innerHTML = parseInt(t) + parseInt(v);
}

</script>

and then:

<input type="checkbox" name="array[]" valuex="19.50" value="12" onClick="reCalc(this.valuex, this.checked);">
Total:
&pound;<span id="total">0</span>

Problem is that this doesnt handle decimals, can anyone help?

0

LVL 31

Expert Comment

ID: 12454349
try these

<script>
function getTotal(form){
total=0
for (i=0;i<form.elements.length;i++)
if (form.elements[i].id="item[]") total+=form.elements[i].checked
form.textfield.value=total
}
</script>

<form name="form1" method="post" action>
<p><input name="item[]" type="checkbox" id="item[]" value="1"> Item 1<br>
<input name="item[]" type="checkbox" id="item[]" value="2"> Item 2<br>
<input name="item[]" type="checkbox" id="item[]" value="3"> Item 3</p>
<p>Total
<input type="text" name="textfield"><br>
<input type="button" value="get total" onclick="getTotal(this.form)"> </p>
<input type="submit" name="Submit" value="Submit"> </p>
</form>

you could also put the function call on the onclick event of each checkbox to update automatically

<script>
function getTotal(form){
total=0
for (i=0;i<form.elements.length;i++)
if (form.elements[i].id="item[]") total+=form.elements[i].checked
form.textfield.value=total
}
</script>

<form name="form1" method="post" action>
<p><input name="item[]" type="checkbox" id="item[]" value="1"  onclick="getTotal(this.form)"> Item 1<br>
<input name="item[]" type="checkbox" id="item[]" value="2"  onclick="getTotal(this.form)"> Item 2<br>
<input name="item[]" type="checkbox" id="item[]" value="3"  onclick="getTotal(this.form)"> Item 3</p>
<p>Total
<input type="text" name="textfield" value='0'><p>
<input type="submit" name="Submit" value="Submit"> </p>
</form>

0

LVL 31

Expert Comment

ID: 12454385
or perhaps it is this that you need ?

<script>
function getTotal(form){
total=0
for (i=0;i<form.elements.length;i++)
if (form.elements[i].checked && form.elements[i].name=="item[]") total+=1*form.elements[i].id
form.textfield.value=total
}
</script>

<form name="form1" method="post" action>
<p><input name="item[]" type="checkbox" id="34" value="1" onclick="getTotal(this.form)">
Item 1<br>
<input name="item[]" type="checkbox" id="56" value="2" onclick="getTotal(this.form)"> Item
2<br>
<input name="item[]" type="checkbox" id="11" value="3" onclick="getTotal(this.form)"> Item
3</p>
<p>Total <input type="text" name="textfield" value="0"></p>
<p><input type="submit" name="Submit" value="Submit"> </p>
</form>
0

LVL 31

Expert Comment

ID: 12454504
my last post is the one you want
0

Author Comment

ID: 12456218
Hi thats great, just one more thing. Is there a way to show only two decimal places in the total field, with it rounding down if there are more?
0

LVL 31

Accepted Solution

GwynforWeb earned 500 total points
ID: 12456608
<script>
function getTotal(form){
total=0
for (i=0;i<form.elements.length;i++)
if (form.elements[i].checked && form.elements[i].name=="item[]") total+=1*form.elements[i].id
form.textfield.value=total.toFixed(2)
}
</script>

<form name="form1" method="post" action>
<input name="item[]" type="checkbox" id="34.6767" value="1"onclick="getTotal(this.form)"> Item 1<br>
<input name="item[]" type="checkbox" id="56.553" value="2" onclick="getTotal(this.form)">Item 2<br>
<input name="item[]" type="checkbox" id="11.367" value="3" onclick="getTotal(this.form)">Item 3</p>

<p>Total <input type="text" name="textfield" value="0"></p>
<p><input type="submit" name="Submit" value="Submit"></p>
</form>
0

## Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
###### Suggested Courses
Course of the Month9 days, 21 hours left to enroll