[James1992]

I am creating an order form that consists of many checkboxes.

I want to allow the user to select as many checkboxes as they wish, and when they select or deselect the checkbox, I want a disabled textbox to be updated of the new value. I have an idea how to do it, such as, each time a checkbox is selected or deselected this will trigger the javascript. The javascript will find whether any of the checkboxes are checked, if they are, then add their values are added together and print to the disabled text box.

So let's say I have the code below.

<input type="checkbox" name="app" value="3.49" id="app_1" onclick="javascript:updateTextbox"/>
<input type="checkbox" name="app" value="0.49" id="app_2" onclick="javascript:updateTextbox"/>

Is it possible to get the values of any checked boxes and then add them together? If so, would greatly appreciate some help

[Kruithne]

Hello there,

Take a look at this small snippet of code. It shows you how to achieve what you are after in a very simple fashion and should give you an idea how to implement said things into your code.

<script>
	function science()
	{
		var c1 = document.getElementById('c1'), // Checkbox 1
			c2 = document.getElementById('c2'), // Checkbox 2
			c3 = document.getElementById('c3'), // Checkbox 3
			total = 0; // Our starting total
			
		if (c1.checked) total += c1.value; // If checked, add c1 value
		if (c2.checked) total += c2.value; // If checked, add c2 value
		if (c3.checked) total += c3.value; // If checked, add c3 value
		
		alert(total); // Alert total
	}
</script>

<input type="checkbox" id="c1" value="50"/>
<input type="checkbox" id="c2" value="50"/>
<input type="checkbox" id="c3" value="50"/>
<input type="button" onclick="science()"/>

NOTE: I have not tested the above code, if it's not working, let us know and I'll see what I fudged.

[Dormilich]

James1992, on 11 December 2012 - 01:08 PM, said:

Is it possible to get the values of any checked boxes and then add them together?

of course. every checked checkbox’s checked property is set to true. you can call() Array methods to filter them out.

[Dormilich]

Kruithne, on 11 December 2012 - 01:13 PM, said:

NOTE: I have not tested the above code, if it's not working, let us know and I'll see what I fudged.

let me guess, if you check all 3 boxes, it alerts "0505050".

This post has been edited by Dormilich: 11 December 2012 - 05:32 AM

[Kruithne]

Dormilich, on 11 December 2012 - 12:31 PM, said:

Kruithne, on 11 December 2012 - 01:13 PM, said:

NOTE: I have not tested the above code, if it's not working, let us know and I'll see what I fudged.

let me guess, if you check all 3 boxes, it alerts "0505050".

Fudge. Sorry, I just poached the reply out between work. You'll need to either have the values as int values or parse the values to int values.

[Dormilich]

one way to do it (tested).

function total(evt)
{
    var cb = document.getElementsByName("app");
    var sum = [].reduce.call(cb, function(prev, curr) {
        if (curr.checked) {
            return prev + (+curr.value);
        }
        return prev;
    }, 0);
    alert( sum.toFixed(2) );
}

This post has been edited by Dormilich: 11 December 2012 - 05:57 AM
Reason for edit:: makes more sense

[Dormilich]

and while I’m at it:

function total(evt)
{
    var cb = document.getElementsByName("app");
    var sum = [].filter.call(cb, function(item) { // only use checked elements
        return item.checked;
    }).map(function(item) { // convert to numbers
        return +item.value;
    }).reduce(function(p, c) { // sum up
        return p + c;
    }, 0);
    alert( sum.toFixed(2) );
}

you could, of course, use any combination of that with the above

[James1992]

I thought it would be easier if I just started with 1 checkbox. So this is my code

var total = 0.00

function update()
 {
	var cal = document.getElementById('app_0');
		if (cal.checked) { 
		total += parseFloat(cal.value);
		document.getElementById('total').value = total;
		return false;
	}
	else {
		 total -= parseFloat(cal.value);
		 document.getElementById('total').value = total;
		 return false;
	}
}

This works fine. I assume once I start getting loads of checkboxes then I'll end up with loads of if statements. But for the mean time it's alright. There is a problem though. If the user clicks the checkbox faster than the textbox can change value, eventually the value in checkbox will start to return incorrect values. If the user clicks at a normal speed, then all is good! Any reason why this is?

This post has been edited by James1992: 11 December 2012 - 06:21 AM

[Dormilich]

James1992, on 11 December 2012 - 02:20 PM, said:

Any reason why this is?

the global variable. and the system in which you calculate the total. you take the incremental approach which does not represent the state of all checkboxes (rather the change to the previous configuration).



Note: that’s why in videos there are key frames (complete pictures) because most encoders only save differences between images and that sooner or later leads to deviations.

another Note: floating point Math is not precise. you should see that already if you use 2 boxes.