Validating number of check boxes selected.

@llckllJul 13.2011

Hello,

I have multiple checkboxes. How can I validate the group of check boxes so that a user can only select two. If they try to select more than two, an alert will pop up stating they can only choose two?

[CODE]<tr> <td align=”left” rowspan=”5″ valign=”top”>BD Falcon Tissue Culture</td> <td>Clear</td> <td align=”center”><input type=”checkbox” name=”BDFTC_C_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDFTC_C_384W” value=”1″ /></td> <td> </td> <td> </td> </tr> <tr> <td>White</td> <td align=”center”><input type=”checkbox” name=”BDFTC_W_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDFTC_W_384W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDFTC_W_384WSV” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDFTC_W_1536W” value=”1″ /></td> </tr> <tr> <td>Black</td> <td align=”center”><input type=”checkbox” name=”BDFTC_B_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDFTC_B_384W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDFTC_B_384WSV” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDFTC_B_1536W” value=”1″ /></td> </tr> <tr> <td>Black/Clear</td> <td align=”center”><input type=”checkbox” name=”BDFTC_BC_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDFTC_BC_384W” value=”1″ /></td> <td> </td> <td align=”center”><input type=”checkbox” name=”BDFTC_BC_1536W” value=”1″ /></td> </tr> <tr> <td>White/Clear</td> <td align=”center”><input type=”checkbox” name=”BDFTC_WC_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDFTC_WC_384W” value=”1″ /></td> <td> </td> <td align=”center”><input type=”checkbox” name=”BDFTC_WC_1536W” value=”1″ /></td> </tr> <tr> <td align=”left” rowspan=”5″ valign=”top”>BD BioCoat Poly-D-Lysine</td> <td>Clear</td> <td align=”center”><input type=”checkbox” name=”BDBCPDL_C_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDBCPDL_C_384W” value=”1″ /></td> <td> </td> <td> </td> </tr> <tr> <td>White</td> <td align=”center”><input type=”checkbox” name=”BDBCPDL_W_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDBCPDL_W_384W” value=”1″ /></td> <td> </td> <td> </td> </tr> <tr> <td>Black/Clear</td> <td align=”center”><input type=”checkbox” name=”BDBCPDL_BC_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDBCPDL_BC_384W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDBCPDL_BC_384WSV” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDBCPDL_BC_1536W” value=”1″ /></td> </tr> <tr> <td>White/Clear</td> <td align=”center”><input type=”checkbox” name=”BDBCPDL_WC_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDBCPDL_WC_384W” value=”1″ /></td> <td> </td> <td> </td> </tr> <tr> <td align=”left” rowspan=”5″ valign=”top”>BD Biocoat Collagen 1</td> <td>Clear</td> <td align=”center”><input type=”checkbox” name=”BDBC1_C_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDBC1_C_384W” value=”1″ /></td> <td> </td> <td> </td> </tr> <tr> <td>White</td> <td align=”center”><input type=”checkbox” name=”BDBC1_W_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDBC1_W_384W” value=”1″ /></td> <td> </td> <td> </td> </tr> <tr> <td>Black/Clear</td> <td align=”center”><input type=”checkbox” name=”BDBC1_BC_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDBC1_BC_384W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDBC1_BC_384WSV” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDBC1_BC_1536W” value=”1″ /></td> </tr> <tr> <td>White/Clear</td> <td align=”center”><input type=”checkbox” name=”BDBC1_WC_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDBC1_WC_384W” value=”1″ /></td> <td> </td> <td> </td> </tr> <tr> <td align=”left” rowspan=”5″ valign=”top”>BD PureCoat Amine</td> <tr> <td>Black/Clear</td> <td align=”center”><input type=”checkbox” name=”BDBPA_BC_96W” value=”1″ /></td> <td align=”center”><input type=”checkbox” name=”BDBPA_BC_384W” value=”1″ /></td> <td> </td> <td align=”center”><input type=”checkbox” name=”BDBPA_BC_1536W” value=”1″ /></td> </tr>[/CODE]

to post a comment

JavaScript

2 Comments(s) _↴

@vwphillipsJul 13.2011 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script type="text/javascript">
 /*<![CDATA[*/
 
 function only(id,nu){
 var ips=document.getElementById(id).getElementsByTagName('INPUT'),z0=0;
 for (;z0<ips.length;z0++){
 if (ips[z0].type=='checkbox'){
 ips[z0].onmouseup=function(){ cknu(this,nu); }
 }
 }
 
 }
 
 function cknu(obj,nu){
 while (obj.parentNode&&obj.nodeName.toUpperCase()!='TR'){
 obj=obj.parentNode;
 }
 var ips=obj.getElementsByTagName('INPUT'),z0=0,cnt=0;
 for (;z0<ips.length;z0++){
 if (ips[z0].type=='checkbox'&&ips[z0].checked){
 cnt++;
 }
 }
 if (cnt==nu){
 alert('only '+nu+' may be checked');
 obj.checked=false;
 }
 }
 /*]]>*/
 </script></head>
 
 <body onload="only('tst',2);">
 <form>
 <table id="tst" >
 <tr>
 <td align="left" rowspan="5" valign="top">BD Falcon Tissue Culture</td>
 <td>Clear</td>
 <td align="center"><input type="checkbox" name="BDFTC_C_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDFTC_C_384W" value="1" /></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr >
 <td>White</td>
 <td align="center"><input type="checkbox" name="BDFTC_W_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDFTC_W_384W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDFTC_W_384WSV" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDFTC_W_1536W" value="1" /></td>
 </tr>
 <tr >
 <td>Black</td>
 <td align="center"><input type="checkbox" name="BDFTC_B_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDFTC_B_384W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDFTC_B_384WSV" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDFTC_B_1536W" value="1" /></td>
 </tr>
 <tr >
 <td>Black/Clear</td>
 <td align="center"><input type="checkbox" name="BDFTC_BC_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDFTC_BC_384W" value="1" /></td>
 <td>&nbsp;</td>
 <td align="center"><input type="checkbox" name="BDFTC_BC_1536W" value="1" /></td>
 </tr>
 <tr >
 <td>White/Clear</td>
 <td align="center"><input type="checkbox" name="BDFTC_WC_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDFTC_WC_384W" value="1" /></td>
 <td>&nbsp;</td>
 <td align="center"><input type="checkbox" name="BDFTC_WC_1536W" value="1" /></td>
 </tr>
 <tr >
 <td align="left" rowspan="5" valign="top">BD BioCoat Poly-D-Lysine</td>
 <td>Clear</td>
 <td align="center"><input type="checkbox" name="BDBCPDL_C_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDBCPDL_C_384W" value="1" /></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr >
 <td>White</td>
 <td align="center"><input type="checkbox" name="BDBCPDL_W_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDBCPDL_W_384W" value="1" /></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr >
 <td>Black/Clear</td>
 <td align="center"><input type="checkbox" name="BDBCPDL_BC_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDBCPDL_BC_384W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDBCPDL_BC_384WSV" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDBCPDL_BC_1536W" value="1" /></td>
 </tr>
 <tr >
 <td>White/Clear</td>
 <td align="center"><input type="checkbox" name="BDBCPDL_WC_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDBCPDL_WC_384W" value="1" /></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr >
 <td align="left" rowspan="5" valign="top">BD Biocoat Collagen 1</td>
 <td>Clear</td>
 <td align="center"><input type="checkbox" name="BDBC1_C_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDBC1_C_384W" value="1" /></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr >
 <td>White</td>
 <td align="center"><input type="checkbox" name="BDBC1_W_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDBC1_W_384W" value="1" /></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr >
 <td>Black/Clear</td>
 <td align="center"><input type="checkbox" name="BDBC1_BC_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDBC1_BC_384W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDBC1_BC_384WSV" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDBC1_BC_1536W" value="1" /></td>
 </tr>
 <tr >
 <td>White/Clear</td>
 <td align="center"><input type="checkbox" name="BDBC1_WC_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDBC1_WC_384W" value="1" /></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td align="left" rowspan="5" valign="top">BD PureCoat Amine</td>
 <tr >
 <td>Black/Clear</td>
 <td align="center"><input type="checkbox" name="BDBPA_BC_96W" value="1" /></td>
 <td align="center"><input type="checkbox" name="BDBPA_BC_384W" value="1" /></td>
 <td>&nbsp;</td>
 <td align="center"><input type="checkbox" name="BDBPA_BC_1536W" value="1" /></td>
 </tr>
 </table>
 </form>
 </body>
 
 </html>[/CODE]

@jamesbcox1980Jul 13.2011 — #If you used the jQuery framework in your page, you could do this with a very small amount of programming. In fact, you can just disable the unchecked checkboxes altogether once 2 are selected:

[CODE]function validateCheckbox() {
 $(':checkbox:not(:checked)').attr('disabled', $(':checkbox:checked').length >= 2 ? true : false);
 }
 $(document).ready(function() {
 validateCheckbox();
 $(':checkbox').change(validateCheckbox);
 });[/CODE]

If you wanted to validate just a certain section of checkboxes, simply give those checkboxes their own class name, then modify the code above:

Let's say we give them the class name "chkBxValid_1" like so:

[code=html]...
 <td><input class="chkBxValid_1" type="checkbox" name="BDFTC_W_384WSV" value="1" /></td>
 <td><input class="chkBxValid_1" type="checkbox" name="BDFTC_W_1536W" value="1" /></td>
 ...[/code]

Then we modify the code like this:

[CODE]
 function validateCheckbox() {
 $('chkBxValid_1:checkbox:not(:checked)').attr('disabled', $('chkBxValid_1:checkbox:checked').length >= 2 ? true : false);
 }
 $(document).ready(function() {
 validateCheckbox();
 $('chkBxValid_1:checkbox').change(validateCheckbox);
 });[/CODE]

Also in #JavaScript _↴

Rick roll site error changing html tags without touching the inner html Aviod page reload when user hits back button

Success!

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

Tweet This

Validating number of check boxes selected.

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Validating number of check boxes selected.

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴