Useful JavaScript: maxCheckbox
I don’t write a lot of JavaScript. Every now and then I need it to use it solve a design problem. Recently, I needed JavaScript that would make sure that only three checkboxes could be checked at once. Here’s what I came up with in case it’s helpful to someone else.
var current_count = 0;
var max_count = 3;
function maxCheckbox(item) {
if(item.checked) {
if(current_count >= max_count) {
item.checked=false;
alert(’You may only choose ‘+max_count+’ checkboxes.’);
} else {
current_count += 1;
}
} else {
current_count -= 1;
}
}
One
Two
Three
Four
Five
Each time a box is clicked the script runs. If a check mark is being added then the script tests to see if the running total (current_count) is larger than the defined maximum (max_count). If so, then it undoes the checkmark and displays an alert, but if not, then it allows the check and adds one to the current tally. When a box is unchecked, the tally simply decreases by one.
-
That’s the best news I’ve heard all year. Can’t wait.
August 23rd, 2005 at 12:18 pm -
Thanks, Adam! I have already started working on PHP Beyond the Basics as well as making some updates to the existing training videos. I’m glad to hear that they helped.
August 23rd, 2005 at 1:24 pm -
Hi Kevin, I’ve watched your PHP Essential Training Videos countless times and certainly will be watching them many times again. Firstly, thank you for making them. They’re absolutely flawless and I wouldn’t be where I am today had I not found them. Can’t wait utill I have the time to start the Ruby on Rails training which I notice has a Beyond the Basics edition as well. Do you plan to ever do something similar for PHP? I think it goes without saying you’d have at least one customer. Thanks again and sorry for using a comment to contact you (I couldn’t find a contact link/form anywhere).
August 23rd, 2005 at 3:09 pm -
Glen, what do you see as the advantage of your version?
I think the disadvantage would be that it doesn’t warn you until you submit the form. I think it is more elegant to handle it when the user is going through that area of the form instead of asking them to find and correct the checkboxes after the fact. Prevention vs. cure. But that may also just reflect a personal preference of mine.
August 23rd, 2005 at 7:13 pm -
Why not degrade gracefully, and use CSS classes, and a bit of Javascript? Here’s the code:
apple
maple
cinnamononsubmit for the form has this
function maximum(fObj, associatedNumber) {
var theseCheckboxes = document.getElementsByName(fObj.name);
var somethingChecked = 0;
for(var theCheckbox = 0; theCheckbox associatedNumber) {
alert(’You may check up to ‘+associatedNumber+’ ‘ + checkboxes + ‘!’);
return false;
}
}Thoughts?
August 23rd, 2005 at 9:32 pm
Subscribe by RSS