William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

jQuery checkbox group example

jQuery checkbox group example

I wrote a jQuery checkbox group example which is universal usage:

  • It needs jQuery supports.
  • Highlight selected items.
  • print out the selected items.
  • Pretty easy to integrate into web application.
<style type="text/css">
.cc {
 border: 3px solid red;
fieldset {
 padding: 1em;
 font:80%/1 sans-serif;
 width: 230px;
<script language="javascript" type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
 $("form input:checkbox").click(function() {
  s = $(this);
  if (s.is(':checked')) s.parent().siblings().addClass('cc');
  else s.parent().siblings().removeClass('cc');
  var t = $('input[name="upload_group"]:checked').map(function() {
    return $(this).val();
  if($("form input[name='upload_group']:checked").size()==0) {
   alert('Please at least select 1 File to upload.');
   return false;
  alert(t+','+$("form input[name='upload_group']:checked").size());
  <table border="0" cellpadding="4" cellspacing="4">
    <strong>Upload Selection</strong>
        <th class="bdRW">Files to Upload</th>
        <td class="bdR">Checkbox 1</td>
        <td align="right"><input type="checkbox" name="upload_group" value="ug1" /></td>
        <td class="bdR">Checkbox 2</td>
        <td align="right"><input type="checkbox" name="upload_group"  value="ug2" /></td>
        <td class="bdR">Checkbox 3</td>
        <td align="right"><input type="checkbox" name="upload_group"  value="ug3" /></td>
        <td class="bdR">Checkbox 4</td>
        <td align="right"><input type="checkbox" name="upload_group"  value="ug4" /></td>
        <td colspan="2"><input type="submit" value="Submit" />

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: