Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Limit the number of check boxes selected

Posted on 2004-04-06
13
886 Views
Last Modified: 2008-03-06


I have a form with 5 checkboxes (could be more) along with other form elements, can you give me a function that constantly (on keypress?) check the number of check boxes being selected and limit them to 3? If a user select more than 3 (the 4th one) then it will pop a message "Please select only 3 options"

Thanks,

Andre

Part of my form code:


--------------------------------

<tr>                                    
      <td>&nbsp;</td>
      <td><input type="checkbox" name="SceneType" value="1">A</td>
</tr>
<tr>                                    
      <td>&nbsp;</td>
      <td><input type="checkbox" name="SceneType" value="2">B</td>
</tr>
<tr>                                    
      <td>&nbsp;</td>
      <td><input type="checkbox" name="SceneType" value="3">C</td>
</tr>
<tr>                                    
      <td>&nbsp;</td>
      <td><input type="checkbox" name="SceneType" value="4">D</td>
</tr>
<tr>                                    
      <td>&nbsp;</td>
      <td><input type="checkbox" name="SceneType" value="5">E</td>
</tr>

--------------------------------
0
Comment
Question by:andreni78
  • 4
  • 3
  • 3
  • +2
13 Comments
 
LVL 33

Assisted Solution

by:sajuks
sajuks earned 100 total points
ID: 10764256
<html>
<head>
<script>
function checkthis(theBox){
 boxName=theBox.name;
 elm=theBox.form.elements;
 count=0;
 for(i=0;i<elm.length;i++)
   if(elm[i].name==boxName && elm[i].checked==true)
     count++
 if(count > 3){
   alert('More then three boxes of the group"'+theBox.name+'" checked.')
   theBox.checked=false;
 }
}
</script>
</head>
<body>
<form>
<input type=checkbox name=SceneType value="1" onClick="checkthis(this)">A
<input type=checkbox name=SceneType value="2" onClick="checkthis(this)">B
<input type=checkbox name=SceneType value="3" onClick="checkthis(this)">C
<input type=checkbox name=SceneType value="4" onClick="checkthis(this)">D
</form>
</body>
</html>
0
 
LVL 7

Assisted Solution

by:TheKenman
TheKenman earned 50 total points
ID: 10764370
Hi andreni78,

Try this:

<html>
<head>
<script language="javascript">
function doChk(obj){
   var j = 0;
   for(i=0;i<document.yo.elements.length;i++){
      if (document.yo.elements[i].checked) {
         j += +1;
      }
   }
   if (j > 3) {
   alert('Please only select 3 options.');
   obj.checked = false;
   }
}
</script>
</head>        
<body>
<table>                    
<form name="yo" id="yo">
<tr>                              
     <td>&nbsp;</td>
     <td><input type="checkbox" name="SceneType" value="1" onClick="javascript:doChk(this);">A</td>
</tr>
<tr>                              
     <td>&nbsp;</td>
     <td><input type="checkbox" name="SceneType" value="2" onClick="javascript:doChk(this);">B</td>
</tr>
<tr>                              
     <td>&nbsp;</td>
     <td><input type="checkbox" name="SceneType" value="3" onClick="javascript:doChk(this);">C</td>
</tr>
<tr>                              
     <td>&nbsp;</td>
     <td><input type="checkbox" name="SceneType" value="4" onClick="javascript:doChk(this);">D</td>
</tr>
<tr>                              
     <td>&nbsp;</td>
     <td><input type="checkbox" name="SceneType" value="5" onClick="javascript:doChk(this);">E</td>
</tr>
</table>
</form>
</body>
</html>
0
 
LVL 7

Expert Comment

by:TheKenman
ID: 10764374
Dang, someone beat me to it..
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 63

Accepted Solution

by:
Zvonko earned 300 total points
ID: 10764410
Here my version:


<html>
<head>
<script>
function checkBox(theBox){
  allBox=theBox.form[theBox.name];
  chkd = 0;
  for(i=0;i<allBox.length;i++){
    if(allBox[i].checked==true)chkd++;
  }
  if(chkd>3){
    alert("More then three boxes checked.");
    theBox.checked = false;
  }
}
</script>
</head>
<body>
<form>
<table>
<tr>                              
    <td>&nbsp;</td>
    <td><input type="checkbox" name="SceneType" value="1" onClick="checkBox(this)">A</td>
</tr>
<tr>                              
    <td>&nbsp;</td>
    <td><input type="checkbox" name="SceneType" value="2" onClick="checkBox(this)">B</td>
</tr>
<tr>                              
    <td>&nbsp;</td>
    <td><input type="checkbox" name="SceneType" value="3" onClick="checkBox(this)">C</td>
</tr>
<tr>                              
    <td>&nbsp;</td>
    <td><input type="checkbox" name="SceneType" value="4" onClick="checkBox(this)">D</td>
</tr>
<tr>                              
    <td>&nbsp;</td>
    <td><input type="checkbox" name="SceneType" value="5" onClick="checkBox(this)">E</td>
</tr>
</table>
</form>
</body>
</html>


0
 
LVL 15

Assisted Solution

by:VincentPuglia
VincentPuglia earned 50 total points
ID: 10764769
And yet another version:

<html>
<head>
<script type='text/javascript'>
var chkd = 0;
function checkit(chObj)
{
  chkd++;
  if (chkd > 3)
  {
    alert("More then three boxes checked.");
  chObj.checked = false;
  }
}
</script>
</head>
<body>
<form>
<table>
<tr>                              
    <td>&nbsp;</td>
    <td><input type="checkbox" name="SceneType" value="1" onClick="if (this.checked) checkit(this)" >A</td>
</tr>
<tr>                              
    <td>&nbsp;</td>
    <td><input type="checkbox" name="SceneType" value="2" onClick="if (this.checked) checkit(this)">B</td>
</tr>
<tr>                              
    <td>&nbsp;</td>
    <td><input type="checkbox" name="SceneType" value="3" onClick="if (this.checked) checkit(this)">C</td>
</tr>
<tr>                              
    <td>&nbsp;</td>
    <td><input type="checkbox" name="SceneType" value="4" onClick="if (this.checked) checkit(this)">D</td>
</tr>
<tr>                              
    <td>&nbsp;</td>
    <td><input type="checkbox" name="SceneType" value="5" onClick="if (this.checked) checkit(this)">E</td>
</tr>
</table>
</form>
</body>
</html>

Vinny
0
 
LVL 33

Expert Comment

by:sajuks
ID: 10764892
:-) :-) :-).
' ' ' ' ' ' ' ' ' ' '  ' '
' ' ' ' ' ' ' ' ' ' '  '
Its raining solutions
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10764935
Its raining confusions :-)

Vinny, select four checkboxes, unselect all again and check again one.

0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 10765015
Thanks Zvonko,

That will teach to me to code before I finish my first mug of espresso :D


<script type='text/javascript'>
var chkd = 0;
function checkit(chObj)
{
 
  chkd += (chObj.checked) ? 1 : -1;
  if (chkd > 3)
  {
    alert("More then three boxes checked.");
  chObj.checked = false;
    chkd--;
  }
}
</script>
</head>
<body>
<form>
<table>
<tr>                              
    <td>&nbsp;</td>
    <td><input type="checkbox" name="SceneType" value="1" onClick="checkit(this)" >A</td>
</tr>

Vinny
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10765112
Ok, but now you can have only ONE group of checkboxes to check for max.
My example can check many groups by checkbox name.

0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 10765158
Hi Zvonko,

 I simply threw in the solution to throw it into the ring as another alternative.  I personally wouldn't code it that way for myself -- it uses a global variable (chkd); something I try to stay away.

 Besides I'm still sipping my espresso :D

Vinny
0
 

Author Comment

by:andreni78
ID: 10772734
Thank you all for your help. I choose Zvonko solution because it is elegant, simple, flexible and generic.

Andre
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10772828
Thanks for points and thank you for the feedback.
Splitting points is always the best approach when several experts helped you to find a solution.

Cheers,
Zvonko
0
 
LVL 7

Expert Comment

by:TheKenman
ID: 10772856
Thanks for following up andreni78, and thanks for giving consideration (points) to the rest of us!

Take care,
Kenman
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery Scroll To Top 5 36
Access RV042 GUI / Browser Issues 25 44
Add or delete table rows 10 53
Start Auto-download of File when page loads? 1 20
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question