www.webdeveloper.com
Results 1 to 3 of 3
  1. 07-13-2011, 09:32 AM #1
    llckll
    llckll is offline Registered User
    Join Date
    Jul 2008
    Posts
    92

    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>
    Reply With Quote Reply With Quote
  2. 07-13-2011, 11:09 AM #2
    vwphillips
    vwphillips is offline Super Moderator
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,564
    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.uk
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  3. 07-13-2011, 01:19 PM #3
    jamesbcox1980
    jamesbcox1980 is offline Registered User
    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.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles