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.
<script type="text/javascript" language="javascript">
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;
}
}
</script>
<input name="checkbox1" onclick="maxCheckbox(this)" type="checkbox" value="1" /> One
<input name="checkbox2" onclick="maxCheckbox(this)" type="checkbox" value="1" /> Two
<input name="checkbox3" onclick="maxCheckbox(this)" type="checkbox" value="1" /> Three
<input name="checkbox4" onclick="maxCheckbox(this)" type="checkbox" value="1" /> Four
<input name="checkbox5" onclick="maxCheckbox(this)" type="checkbox" value="1" /> Five
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;
}
}
</script>
<input name="checkbox1" onclick="maxCheckbox(this)" type="checkbox" value="1" /> One
<input name="checkbox2" onclick="maxCheckbox(this)" type="checkbox" value="1" /> Two
<input name="checkbox3" onclick="maxCheckbox(this)" type="checkbox" value="1" /> Three
<input name="checkbox4" onclick="maxCheckbox(this)" type="checkbox" value="1" /> Four
<input name="checkbox5" onclick="maxCheckbox(this)" type="checkbox" value="1" /> 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.
May 20th, 2008 at 8:08 am
Why not degrade gracefully, and use CSS classes, and a bit of Javascript? Here’s the code:
apple
maple
cinnamon
onsubmit 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?
May 21st, 2008 at 12:24 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.
May 22nd, 2008 at 9:51 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).
May 22nd, 2008 at 9:58 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.
May 22nd, 2008 at 10:27 pm
That’s the best news I’ve heard all year. Can’t wait.