William Jiang

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

Tag Archives: checkbox

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" />

jQuery: Is checkbox checked?

jQuery: Is checkbox checked?

for checkbox, radio, or select menu, sometimes we need to judge which one(s) is/are selected. Here I use checkbox as example, list 2 very common ways to check if they are checked or not?

// 1. use filtering is() and :checked Selector.

// 2. use checkbox attribute 'checked'.
if ($('#checkBox').attr('checked')) {...}

The following is the checkbox interaction between jQuery and PHP codes:

// 1. use jQuery to get the checkbox group values.
  .map(function(){ return $(this).val(); })
// 2. Then explode in PHP:
$mycheckboxes = explode(',',$_GET['mycheckboxes']);