Clearing & Counting Checkboxes

**cascadeorca** · 02-06-2011, 03:31 AM

I'm having a hard time figuring this out, and was wondering if any of you can help me.

I'm writing a bunch of PHP pages, and some of them I am putting checkboxes on. I figure javascript would be the right language to do this in.

I want to have a bunch of checkboxes, and to have each checkbox record itself, and like... add 1 to an equation.

I would also like it so I could have a box which you can click to clear all the checkboxes.

I hope this picture can help explain what I'm thinking about.

http://i51.tinypic.com/2czex49.png

Any help, or links, would be greatly appreciated.

Thank you guys a ton for helping.

**Nile** · 02-06-2011, 03:29 PM

Play around with this:

Code:

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
	var countboxes = function(formID, checksName, updateID){
		var maxChecks = new Array();
		maxChecks['max'] = new Array();
		maxChecks['checked'] = new Array();
		var inputs = document.getElementById(formID).getElementsByTagName('input');
		for(var i = 0; i < inputs.length; i++){
			if(inputs[i].type == "checkbox" && inputs[i].name == checksName){
				maxChecks['max'][maxChecks['max'].length] = inputs[i];
				if(inputs[i].checked){
					maxChecks['checked'][maxChecks['checked'].length] = inputs[i];
				}
			}
		}
		document.getElementById(updateID).innerHTML = maxChecks['checked'].length + " / " + maxChecks['max'].length;
	};
	var clearChecks = function(formID, checksName){
		var inputs = document.getElementById(formID).getElementsByTagName('input');
		for(var i = 0; i < inputs.length; i++){
			if(inputs[i].type == "checkbox" && inputs[i].name == checksName){
				inputs[i].checked = false;
				inputs[i].onchange();
			}
		}
	}
	window.onload = function(){
		var formID = "checkboxes", 
			checksName = "item",
			updateID = "update";
			
		var inputs = document.getElementById(formID).getElementsByTagName('input');
		for(var i = 0; i < inputs.length; i++){
			if(inputs[i].type == "checkbox" && inputs[i].name == checksName){
				inputs[i].onchange = function(){
					countboxes(formID, checksName, updateID);
				}
			}
		}
		countboxes(formID, checksName, updateID);
	};
	</script>
</head>
<body>
	<span id="update">initializing</span>
	<form id="checkboxes" name="checkboxes">
		<input type="checkbox" name="item"/>
		<input type="checkbox" name="item"/>
		<input type="checkbox" name="item"/>
		<input type="checkbox" name="item"/>
		<input type="checkbox" name="item"/>
		<input type="button" name="reset" value="Reset Checkboxes" onclick="clearChecks('checkboxes', 'item');"/>
	</form>
</body>
</html>

**cascadeorca** · 02-07-2011, 02:16 AM

Thank you, I absolutely will.

Edit: the reset checkboxes button works perfectly, however the check boxes don't add correctly. Thank you so much for giving me somewhere to start!

**Nile** · 02-07-2011, 03:10 AM

What do you mean they dont add completely? :/ It works fine for me.

**cascadeorca** · 02-07-2011, 04:38 AM

Oh I see, you have to click somewhere else on the page, and then it adds correctly, however just clicking the box doesn't always add immediately. I have only tested it in IE though. Either way I am still very very greatful.

works flawlessly in chrome though, lol.

Browsers are odd things. You are completely awesome for helping me out, I'm so happy with this!

**Nile** · 02-07-2011, 12:54 PM

No problem, I'm glad to help

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"

Thread: Clearing & Counting Checkboxes

Thread Tools

Search Thread

Clearing & Counting Checkboxes

The Following User Says Thank You to Nile For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions