Check for value of multiple checkboxes

@vpekulasFeb 20.2007

How can I make it so the JS function will check that there are at least
2 checkboxes checked and a maximum of 5 checked ?

Is there a way to even do this ? I can have a multiple checkboxes of the same name on the page.

[CODE] <script language=”JavaScript”> function ValidateCompare(){ if (document.getElementById(“compare”).checked==false) { alert(“Check between 2 and 5 checkboxes.”) return false } } </script> [/CODE]

[code=html] <a onclick=”return ValidateCompare();” id=”btnCompare”>Compare</a>

<form name=”form1″>

<input type=”Checkbox” name=”compare” id=”compare” value=”1″ /> <input type=”Checkbox” name=”compare” id=”compare” value=”5″ /> <input type=”Checkbox” name=”compare” id=”compare” value=”8″ /> <input type=”Checkbox” name=”compare” id=”compare” value=”10″ />

</form> [/code]

to post a comment

JavaScript

8 Comments(s) _↴

@konithomimoFeb 20.2007 — #IDs are meant to be unique. You should never give more than one object the same ID. If you do then you will get a bunch of errors. You need to use document.getElementsByName('compare')[i] in a loop with an index variable of i to check each one.

@vpekulasauthorFeb 20.2007 — #OK, but I don't know how many there will be, how can I check for the checkbox then ?

@konithomimoFeb 20.2007 — #getElementsByName() returns an array with references to all objects with that name. Using i<getElementsByName('compare').length as the ending argument for your loop will tell the loop to store once all of the objects have been checked. Then you just need an if-statement in the loop to see if the current checkbox is checked, and if so then add one to your counter. Then have another conditional (it can be in your loop or outside of it) that checks to see if too many, or not enough, were checked. And since you most likely just want someone to give you the code instead of learning it, here it is:

&lt;script language="JavaScript" type="text/javascript"&gt;
 var checeked = 0;
 function ValidateCompare(){
 var c = document.getElementsNyName('compare');
 for(var i=0;i&lt;c.length;c++)
 {
 if (c[i].checked)
 checked++;
 }
 if(checked&gt;5)
 alert('You may only choose a maximum of 5 selections.');
 else if(checked&lt;2)
 alert('You must choose at least 2 selections.');
 else
 return true;
 return false;
 }
 &lt;/script&gt;

@konithomimoFeb 20.2007 — #Sorry . . . the server triple posted it.

@mjdamatoFeb 20.2007 — #First give your checkboxes the name "compare[]" and the values will be sent as a comma separated list. Then when creating the fields give them IDs like this "compare0", "compare1", "comprare2", etc. You must be creating the fields with a server-side language if you don't know how many there will be. So, you will need to implement that logic there.

Then you can use a function like this:

function validateChecked() {
 chkIdx = 0;
 numChecked = 0;
 while (document.getElementById('compare'+chkIdx)) {
 if (document.getElementById('compare'+chkIdx).checked) numChecked++;
 chkIdx++;
 }
 
 if (numChecked&lt;2) {
 alert('Not enough boxes checked');
 return false;
 }
 
 if (numChecked&gt;5) {
 alert(Too many boxes checked');
 return false;
 }
 
 return true;
 }

@vpekulasauthorFeb 21.2007 — #Thanks for your help. In the end I made up a bit different solution:

[CODE]
 
  <script language="JavaScript"> 
   function AddCompareCount(chParent) {
   var CountNow = document.getElementById('Comparecount').value; 
 
   if (chParent.checked == true) {
   CountNow = parseInt(CountNow)+1;
   } else {
   CountNow = parseInt(CountNow)-1;
   }
 
   document.getElementById('Comparecount').value = CountNow;
 
 
   if (parseInt(CountNow) < 2) {
   alert("Zvolte alespon dve polozky k porovnani.");
   }
   if (parseInt(CountNow) > 5) {
   alert("Zvolte maximalne 5 polozek k porovnani.");
   chParent.checked = false;
   } 
 
   }
 
  </script> 
 
 
 <form name="form1">
 <input type="Checkbox" name="compare" id="compare" onClick="JavaScript:AddCompareCount(this);" value="10">
 <input type="Checkbox" name="compare" id="compare" onClick="JavaScript:AddCompareCount(this);" value="11">
 <input type="Checkbox" name="compare" id="compare" onClick="JavaScript:AddCompareCount(this);" value="12">
 <input type="Checkbox" name="compare" id="compare" onClick="JavaScript:AddCompareCount(this);" value="13">
 <input type="Checkbox" name="compare" id="compare" onClick="JavaScript:AddCompareCount(this);" value="14">
 <input type="Checkbox" name="compare" id="compare" onClick="JavaScript:AddCompareCount(this);" value="15">
 <input type="Checkbox" name="compare" id="compare" onClick="JavaScript:AddCompareCount(this);" value="16">
 <input type="Hidden" name="Comparecount" value="0" />
 </form>
 [/CODE]

@TaboFeb 21.2007 — #edit: I missread, i did check all/ uncheck all.

Also in #JavaScript _↴

Coding help frame-loaded pages not in default config How do I do Animations in Javascript

Success!

Help @vpekulas spread the word by sharing this article on Twitter...

Tweet This

Check for value of multiple checkboxes

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Check for value of multiple checkboxes

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴