www.webdeveloper.com
Results 1 to 3 of 3

Thread: Validating number of check boxes selected.

  1. #1
    Join Date
    Jul 2008
    Posts
    93

    Validating number of check boxes selected.

    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>&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>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Dec 2008
    Posts
    488
    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);
    });
    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:
    HTML Code:
    ...
    <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>
    ...
    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);
    });
    Last edited by jamesbcox1980; 07-13-2011 at 01:22 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles