Limit number of checkboxes that can be checked

[PushCode]

I have a form that displays four radio buttons, named

Any Two <input type="radio" name="prog_name" value="13"/>
Any Three <input type="radio" name="prog_name" value="14"/>
Any Four <input type="radio" name="prog_name" value="15"/>
All Five <input type="radio" name="prog_name" value="16"/>

If a user selects Any Three, then I want to limit the number of checkboxes (below), that can be checked to three, or if they select All Five, allow them to check all five of the checkboxes, and so on ...maybe just a pop-up warning if they select one too many, and then uncheck the last one they checked.

Here's what the checkboxes look like:

<input type="checkbox" name="multiprog_hbo" value="yes" /> 
HBO<br /> 
<input type="checkbox" name="multiprog_cin" value="yes" /> 
Cinemax<br /> 
<input type="checkbox" name="multiprog_sho" value="yes" /> 
Showtime<br /> 
<input type="checkbox" name="multiprog_stz" value="yes" /> 
Starz<br /> 
<input type="checkbox" name="multiprog_plb" value="yes" /> 
Playboy

Can anyone show me some onclick javascript to handle this?
Thanks!

 

[trollacious]

Why would you use a value of 13 for a radio button with a label Any Two? If you were to use values to indicate the number of checkboxes allowed, you could write a function to read that value, then count the number of checkboxes selected and display an error message if more were selected than allowed. That could also de-select the last checkbox selected.

<input type="checkbox" name="multiprog_hbo" value="yes" onclick="VerifyNumberSelected(this) /> 
HBO<br /> 
<input type="checkbox" name="multiprog_cin" value="yes" onclick="VerifyNumberSelected(this) /> 
Cinemax<br /> 
<input type="checkbox" name="multiprog_sho" value="yes" onclick="VerifyNumberSelected(this) /> 
Showtime<br /> 
<input type="checkbox" name="multiprog_stz" value="yes" onclick="VerifyNumberSelected(this) /> 
Starz<br /> 
<input type="checkbox" name="multiprog_plb" value="yes" onclick="VerifyNumberSelected(this) /> 
Playboy

You need to make a reasonable attempt to write the Javascript yourself, though, and we'll help out if you get errors you can't figure out.

Lee

 

[monksnake]

onclick function on each input type="checkbox":

Put the checkboxes in a div, well give it an id of checkBoxDiv:

<div id="checkBoxDiv">
   <input type="checkbox" name="multiprog_hbo" value="yes" onclick="checkChecked(this)" /> 
   HBO<br /> 
   <input type="checkbox" name="multiprog_cin"    value="yes" onclick="checkChecked(this)" /> 
   Cinemax<br /> 
   <input type="checkbox" name="multiprog_sho" value="yes" onclick="checkChecked(this)" /> 
   Showtime<br /> 
   <input type="checkbox" name="multiprog_stz" value="yes" onclick="checkChecked(this)" /> 
   Starz<br /> 
   <input type="checkbox" name="multiprog_plb" value="yes" onclick="checkChecked(this)" /> 
   Playboy
</div>

function checkChecked(obj) {
   //Get the value of the radio button
   var noOfChecks = parseInt(document.forms[0].elements["prog_name"].value, 10);
   //Put the checkboxes into an object array
   var checkboxArray = document.getElementsById("checkboxDiv").getElementsByTagName("input");
   var checkboxArrayLength = checkboxArray.length;
   var currentlyChecked = 0;
   //Loop to see how many are currently checked
   for (a = 0; a < checkboxArrayLength; a++) {
      if (checkboxArray.checked) {
         currentlyChecked++;
      }
   }
   //If more are checked than should, uncheck the last checked box and alert
   if (currentlyChecked > noOfChecks) {
      alert("You can only have " + noOfChecks + " checkboxes\n checked at one time."); 
      obj.checked = false;
   }
}

If you have any problems, please ask.

 

[monksnake]

You need to make a reasonable attempt to write the Javascript yourself, though, and we'll help out if you get errors you can't figure out.

Yeah I agree trollacious, it's just I'm so bored it gave me something to do.

Also, those radio button values make no reasonable sence, my code wont work with the values set to that.

 

[PushCode]

Thanks for the help both of you.

I realize that the values of the radio buttons aren't optimal, but they're out of my hands. This is part of a much larger form and these radios are dynamically generated. Actually I was just using made up values in that example. The actual values are as follows:

Any Two <input type="radio" name="prog_name" value="20" />
Any Three <input type="radio" name="prog_name" value="21" />
Any Four <input type="radio" name="prog_name" value="22" />
All Five <input type="radio" name="prog_name" value="23" />

So, I thought if I subtract 18 from each of those values, I have the number I need. So here's what I came up with based on the code provide by monksnake, but it isn't working of course.

function checkChecked(obj) {
   //Get the value of the radio button
   If (document.frm_page.prog_name.checked) {
   	var noOfChecks = document.frm_page.prog_name.value;
   }
   noOfChecks = noOfChecks - 18
   //Put the checkboxes into an object array
   var checkboxArray = document.getElementsById("checkboxDiv").getElementsByTagName("input");
   var checkboxArrayLength = checkboxArray.length;
   var currentlyChecked = 0;
   //Loop to see how many are currently checked
   for (a = 0; a < checkboxArrayLength; a++) {
      if (checkboxArray.checked) {
         currentlyChecked++;
      }
   }
   //If more are checked than should, uncheck the last checked box and alert
   if (currentlyChecked > noOfChecks) {
      alert("You can only have " + noOfChecks + " checkboxes\n checked at one time."); 
      obj.checked = false;
   }

Any thoughts?

 

[monksnake]

Here's what I see:

function checkChecked(obj) {
//Get the value of the radio button
[!] encapsulate this entire function with this if statement if you only want to check on a check (which makes sense [/!]
If (document.frm_page.prog_name.checked) {
var noOfChecks = [!]parseInt(document.frm_page.prog_name.value, 10) - 18;[/!]
//Put the checkboxes into an object array
var checkboxArray = document.getElementsById ("checkboxDiv").getElementsByTagName("input");
var checkboxArrayLength = checkboxArray.length;
var currentlyChecked = 0;
//Loop to see how many are currently checked
for (a = 0; a < checkboxArrayLength; a++) {
if (checkboxArray.checked) {
currentlyChecked++;
}
}
//If more are checked than should, uncheck the last checked box and alert
if (currentlyChecked > noOfChecks) {
alert("You can only have " + noOfChecks + " checkboxes\n checked at one time.");
obj.checked = false;
}
}
[!]}[/!]
[/code]

 

[PushCode]

thanks monksnake.

Using your code I get no error in Firefox, but it doesn't do anything either. And in IE, I get Expected ';' error when the page loads...without clicking on anything.

Here's what I have:

function checkChecked(obj) {
   //Get the value of the radio button
   If (document.frm_page.prog_name.checked) {
      var noOfChecks = parseInt(document.frm_page.prog_name.value, 10) - 18;
      //Put the checkboxes into an object array
      var checkboxArray = document.getElementsById("checkboxDiv").getElementsByTagName("input");
      var checkboxArrayLength = checkboxArray.length;
      var currentlyChecked = 0;
      //Loop to see how many are currently checked
      for (a = 0; a < checkboxArrayLength; a++) {
         if (checkboxArray.checked) {
            currentlyChecked++;
         }
      }
      //If more are checked than should, uncheck the last checked box and alert
      if (currentlyChecked > noOfChecks) {
         alert("You can only have " + noOfChecks + " checkboxes\n checked at one time."); 
         obj.checked = false;
      }
   }
}

 

[monksnake]

Right here:

If (document.frm_page.prog_name.checked) {

Make "If" "if", don't capitalize it.

 

[PushCode]

That fixed the error. I'm not getting any errors now, but it doesn't seem to be working either. I don't get the alert no matter what I do.

 

[monksnake]

change this:

If (document.frm_page.prog_name.checked) {

to this:

If (obj.checked) {

This will work only when you are clicking on the checkboxes, it will NOT do a check when a different radio button is clicked.

 

[PushCode]

Hmmm, that's not working either. I get the following error the first, and each time thereafter, I click on a ckeckbox.

Object doesn't support this property or method.

?

 

[tsuji]

[tt]function checkChecked(obj) {
[blue]//based on post 20070301 16:21[/blue]
//Get the value of the radio button
If ([red]obj.form[/red].prog_name.checked) {
var noOfChecks = [red]obj.form[/red].prog_name.value;
noOfChecks = noOfChecks - 18
//Put the checkboxes into an object array
var checkboxArray = document.getElemen[highlight]tB[/highlight]yId("checkboxDiv").getElementsByTagName("input");
var checkboxArrayLength = checkboxArray.length;
var currentlyChecked = 0;
//Loop to see how many are currently checked
for (a = 0; a < checkboxArrayLength; a++) {
[green]//check type just to make sure as I don't examine the page[/green]
if ([red]checkboxArray[a].type=="checkbox" && [/red]checkboxArray[red][a][/red].checked) {
currentlyChecked++;
}
}
//If more are checked than should, uncheck the last checked box and alert
if (currentlyChecked > noOfChecks) {
alert("You can only have " + noOfChecks + " checkboxes\n checked at one time.");
obj.checked = false;
}
}
}
[/tt]

 

[PushCode]

Thanks, tsuji. This doesn't seem to work either. No errors, but not working. Not sure what to do.

 

[monksnake]

thanks tsuji, missed the checkboxArray[!][a][/!].

but here:

if (checkboxArray[a].type=="checkbox" && checkboxArray[a].checked) {

no need to check to see if type is "checkbox"

I pull all the inputs from a div that contains only the checkboxes

var checkboxArray = [!]document.getElementById("checkboxDiv")[/!].getElementsByTagName("input");

and here:

If (obj.form.prog_name.checked) {
        var noOfChecks = obj.form.prog_name.value;

obj is (or should be) a checkbox obj, so obj.form is not a correct reference.


PushCode, besides a few syntax errors, I've given you enough of a structure that you should be able to figure out what it going on and how to fix it yourself.

 

[tsuji]

>obj is (or should be) a checkbox obj, so obj.form is not a correct reference.
I don't think so, unless the hard coded document.frm_page.prog_name is on another form of the same page. In any case, use hard code reference as you like. I don't have crystal ball.

But, I don't think "no error, not working" kind of feedback on what I posted is acceptable to warrant serious followup.

 

[monksnake]

But, I don't think "no error, not working" kind of feedback on what I posted is acceptable to warrant serious followup

I agree. Don't know why I tried to help as much as I did.

 

[PushCode]

But, I don't think "no error, not working" kind of feedback on what I posted is acceptable to warrant serious followup"

...who are you to say. I'm trying here, but when it doesn't give me any errors and also doesn't work (doesn't do anything) what am I supposed to say. I wasn't asking for any more "serious followup" anyway. I'm out, I'll go elsewhere to figure this out. Thanks all for the help.

 

[PushCode]

Jesus, get over yourselves. If I knew what to say to make you feel better I would. But I'm here b/c I don't know what I'm doing with this JS. It's a "help" forum for goodness sake. I will not check any further posts to this thread so you don't have to waste any more of your precious time on my obviously inferior line of inquiry.

 

[monksnake]

You don't just copy/paste what is suggested as a solution and hope it all works. If an error is occuring, try to actually see WHY it isn't working (try, catch blocks, alert boxes).

I make coding mistakes all the time, but I also know HOW TO DEBUG.

Also I don't just ask for help on something without an attempt. If I attempted some code, I'd post it along with my question.

In the case that I'm lost, I just ask that kaht guy.