PDA

View Full Version : Resolved 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:


<!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 :D

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"