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;
 background-color:#FFFF00;
}
fieldset {
 padding: 1em;
 font:80%/1 sans-serif;
 width: 230px;
}
</style>
<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');
 });
 $("form").submit(function(event){
  event.preventDefault();
  var t = $('input[name="upload_group"]:checked').map(function() {
    return $(this).val();
   }).get().join(',');
  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());
 });
});
</script>
<form>
  <fieldset>
  <table border="0" cellpadding="4" cellspacing="4">
    <caption>
    <strong>Upload Selection</strong>
    </caption>
    <thead>
      <tr>
        <th class="bdRW">Files to Upload</th>
        <th>Select</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="bdR">Checkbox 1</td>
        <td align="right"><input type="checkbox" name="upload_group" value="ug1" /></td>
      </tr>
      <tr>
        <td class="bdR">Checkbox 2</td>
        <td align="right"><input type="checkbox" name="upload_group"  value="ug2" /></td>
      </tr>
      <tr>
        <td class="bdR">Checkbox 3</td>
        <td align="right"><input type="checkbox" name="upload_group"  value="ug3" /></td>
      </tr>
      <tr>
        <td class="bdR">Checkbox 4</td>
        <td align="right"><input type="checkbox" name="upload_group"  value="ug4" /></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" value="Submit" />
        </td>
      </tr>
    </tbody>
  </table>
  </fieldset>
</form>
Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: