8 Replies - 14978 Views - Last Post: 11 December 2012 - 06:29 AM

#1 James1992  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 130
  • Joined: 30-October 12

How to check if checkbox is checked

Posted 11 December 2012 - 05:08 AM

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 :)

Is This A Good Question/Topic? 0
  • +

Replies To: How to check if checkbox is checked

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: How to check if checkbox is checked

Posted 11 December 2012 - 05:13 AM

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.
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: How to check if checkbox is checked

Posted 11 December 2012 - 05:15 AM

View PostJames1992, 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.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: How to check if checkbox is checked

Posted 11 December 2012 - 05:31 AM

View PostKruithne, 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

Was This Post Helpful? 0
  • +
  • -

#5 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: How to check if checkbox is checked

Posted 11 December 2012 - 05:36 AM

View PostDormilich, on 11 December 2012 - 12:31 PM, said:

View PostKruithne, 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.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: How to check if checkbox is checked

Posted 11 December 2012 - 05:55 AM

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

Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: How to check if checkbox is checked

Posted 11 December 2012 - 06:09 AM

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
Was This Post Helpful? 0
  • +
  • -

#8 James1992  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 130
  • Joined: 30-October 12

Re: How to check if checkbox is checked

Posted 11 December 2012 - 06:20 AM

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

Was This Post Helpful? 0
  • +
  • -

#9 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: How to check if checkbox is checked

Posted 11 December 2012 - 06:29 AM

View PostJames1992, 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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1