[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 891
  • Last Modified:

Limit the number of check boxes selected



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
andreni78
Asked:
andreni78
  • 4
  • 3
  • 3
  • +2
4 Solutions
 
sajuksCommented:
<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
 
TheKenmanCommented:
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
 
TheKenmanCommented:
Dang, someone beat me to it..
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ZvonkoSystems architectCommented:
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
 
VincentPugliaCommented:
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
 
sajuksCommented:
:-) :-) :-).
' ' ' ' ' ' ' ' ' ' '  ' '
' ' ' ' ' ' ' ' ' ' '  '
Its raining solutions
0
 
ZvonkoSystems architectCommented:
Its raining confusions :-)

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

0
 
VincentPugliaCommented:
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
 
ZvonkoSystems architectCommented:
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
 
VincentPugliaCommented:
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
 
andreni78Author Commented:
Thank you all for your help. I choose Zvonko solution because it is elegant, simple, flexible and generic.

Andre
0
 
ZvonkoSystems architectCommented:
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
 
TheKenmanCommented:
Thanks for following up andreni78, and thanks for giving consideration (points) to the rest of us!

Take care,
Kenman
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now