Checkbox Example 5

<div role="application">
<script type="text/javascript">

  var condiments = new CheckboxGroup("cb1all");
  widgets.add( condiments );

  var lettuce = new Checkbox("cb1a");
  condiments.add(lettuce);
  
  var tomato  = new Checkbox("cb1b");
  condiments.add(tomato);
  
  var mustard = new Checkbox("cb1c");
  condiments.add(mustard);
  
  var sprouts = new Checkbox("cb1d");
  condiments.add(sprouts);
  
</script>

<h3 id="cond">Sandwich Condiments</h3>


<ul class="checkboxes" role="group" aria-labelledby="cond">

    <li id="cb1all"
        role="checkbox"
        aria-checked="mixed"
        tabindex="0">
        All condiments
        
     </li>  
            <li id="cb1a"
                role="checkbox"
                aria-checked="false"
                aria-describedby="desc1"
                tabindex="0">
                Lettuce
            </li>
            
            <li id="cb1b"
                role="checkbox"
                aria-checked="true"
                aria-describedby="desc2"
                tabindex="0">
                Tomato
            </li>
            
            <li id="cb1c"
                role="checkbox"
                aria-checked="true"
                aria-describedby="desc3"
                tabindex="0">
                Mustard
            </li>
            
            <li id="cb1d"
                role="checkbox"
                aria-checked="true"
                aria-describedby="desc4"
                tabindex="0">
                Sprouts
            </li>            
  
</ul>

<p id="desc1" class="hidden">Not your average lettuce</p>
<p id="desc2" class="hidden">Organically grown beef steak tomatos</p>
<p id="desc3" class="hidden">Brown and spicy mustard</p>
<p id="desc4" class="hidden">Fresh alfalfa sprouts, organically grown</p>


</div>

  <script type="text/javascript">
/**
*
* The Globale Variables
*/

if (!window.Node) {
  var Node = {            // If there is no Node object, define one
    ELEMENT_NODE: 1,    // with the following properties and values.
    ATTRIBUTE_NODE: 2,  // Note that these are HTML node types only.
    TEXT_NODE: 3,       // For XML-specific nodes, you need to add
    COMMENT_NODE: 8,    // other constants here.
    DOCUMENT_NODE: 9,
    DOCUMENT_FRAGMENT_NODE: 11
  }
}


var KEY_PAGEUP   = 33;
var KEY_PAGEDOWN = 34;
var KEY_END      = 35;
var KEY_HOME     = 36;

var KEY_LEFT     = 37;
var KEY_UP       = 38;
var KEY_RIGHT    = 39;
var KEY_DOWN     = 40;

var KEY_SPACE    = 32;
var KEY_TAB      = 9;

var KEY_BACKSPACE = 8;
var KEY_DELETE    = 46;
var KEY_ENTER     = 13;
var KEY_INSERT    = 45;
var KEY_ESCAPE    = 27;

var KEY_F1        = 112;
var KEY_F2        = 113;
var KEY_F3        = 114;
var KEY_F4        = 115;
var KEY_F5        = 116;
var KEY_F6        = 117;
var KEY_F7        = 118;
var KEY_F8        = 119;
var KEY_F9        = 120;
var KEY_F10       = 121;

var KEY_M         = 77;

var NS_XHTML = "http://www.w3.org/1999/xhtml"
var NS_STATE = "http://www.w3.org/2005/07/aaa";

// **********************************************
// *
// * Commonly used helper functions
// *
// **********************************************

/**
*
* nextSiblingElement
*
* @contructor
*/

function nextSiblingElement( node ) {

  var next_node = node.nextSibling;

  while( next_node
    && (next_node.nodeType != Node.ELEMENT_NODE) ) {
    next_node = next_node.nextSibling;
  }  // endwhile

  return next_node;
  
}

/**
*
* previousSiblingElement
*
* @param ( node ) node object for which you are looking for the next sibling element node
*
* @return ( node) next sibling or "null"
*/

function previousSiblingElement( node ) {

  var next_node = node.previousSibling;

  while( next_node
    && (next_node.nodeType != Node.ELEMENT_NODE) ) {
    next_node = next_node.previousSibling;
  }  // endwhile

  return next_node;
  
}

/**
*
* firstChildElement
*
* @param ( node ) node object for which you are looking for the first child element node
*
* @return ( node) next sibling or "null"
*/

function firstChildElement( node ) {

  var next_node = node.firstChild;

  while( next_node
    && (next_node.nodeType != Node.ELEMENT_NODE) ) {
    next_node = next_node.nextSibling;
  }  // endwhile


  return next_node;
  
}

/**
*
* getTextContentOfNode
*
* @contructor
*/

function getTextContentOfNode( node ) {

  var next_node = node.firstChild;
  var str = "";

  while( next_node ) {
    
    if( (next_node.nodeType == Node.TEXT_NODE ) &&
      (next_node.length > 0 )
     )
      str += next_node.data;
    
    
    next_node = next_node.nextSibling;
    
  }  // endwhile

  return str;
  
}

/**
*
* setTextContentOfNode
*
* @contructor
*/

function setTextContentOfNode( node, text ) {

   // Generate a new text node with the text value
    var text_node = document.createTextNode(text);
  
    // Remove child nodes to remove text
    while (node.firstChild) {
      node.removeChild(node.firstChild);
    } // while

    // Append new text to the container element
    node.appendChild( text_node );

}
  </script>

  <script type="text/javascript">
// JavaScript Document
// Widgets is a way to initialize widgets in the ARIA examples


function Widgets() {
  this.widgets = new Array();
}

/**
* add is member of the Widgets Object
* and used add a widget ot the list of widgets to be intitialized
* as part of the onload event
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/

Widgets.prototype.add = function(obj) {
  this.widgets[this.widgets.length] = obj;
}

/**
* init is member of the Widgets Object
* and is called by the onload event to initialize widgets in the web resource
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/

Widgets.prototype.init = function() {
     
   for(var i = 0; i < this.widgets.length; i++ )
     this.widgets[i].init();
}

var widgets = new Widgets();

function initApp() {
  widgets.init();
}

  </script>

  <script type="text/javascript">
// JavaScript Document
// This module is to abstract browser dependencies
// This makes the widget code cleaner and earier to read by making most browser specfic coding
// in one place rather han scatered throghot documents
var ARIA_STATE = "aria-";

//
// WebBrowser object to abstract accessibility API differences between web standards supporting browsers and Internet Explorer 7.0
//
// The state variable keeps track of current state of checkbox
function WebBrowser() {

}


//
// keyCode is a function to get the keycode from a keypress event
//
// @param ( event object) event is an event object
//
// @return ( keycode )

WebBrowser.prototype.keyCode = function( event ) {
  var e = event || window.event;
  
  return e.keyCode;
}  

/**
* OnClick Event Simulator
*
* @param ( node ) DOM node object
* @return nothing
*/

if( document.createEvent ) {

  // If a web standards based browser implement this function

  WebBrowser.prototype.simulateOnClickEvent = function( node ) {
    // W3C DOM Events way to trigger a "click" event
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );

    node.dispatchEvent( e );

  }

} else {

  // If a Microsoft IE based browser implement this function
  
  WebBrowser.prototype.simulateOnClickEvent = function( node ) {

    var e = document.createEventObject();
    node.fireEvent( "onclick", e );

  } // endif

}

if ( document.addEventListener ) {

  // If a web standards based browser implement this function

  WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

    if( clickHandler )
      document.addEventListener( "click",     clickHandler, true );
    
    if( downHandler )
      document.addEventListener( "mousedown", downHandler,  true );

    if( moveHandler )
      document.addEventListener( "mousemove", moveHandler,  true );
    
    if( upHandler)
      document.addEventListener( "mouseup",   upHandler,    true );

  }

  WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

  if( upHandler)
      document.removeEventListener( "mouseup",   upHandler,    true );
      
    if( moveHandler )
      document.removeEventListener( "mousemove", moveHandler,  true );
    
    if( downHandler )
      document.removeEventListener( "mousedown", downHandler,  true );
      
    if( clickHandler )
      document.removeEventListener( "click",     clickHandler, true );

  }

} else {

  // If a Microsoft IE based browser implement this function

  WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

   node.setCapture();
   if( clickHandler)
     node.attachEvent( "onclick", clickHandler );
    
   if( downHandler)
     node.attachEvent( "onmousedown", downHandler );
    
   if( moveHandler )
     node.attachEvent( "onmousemove", moveHandler );
    
   if( upHandler )
     node.attachEvent( "onmouseup", upHandler );

  } // endif

  WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

   if( upHandler )
     node.detachEvent( "onmouseup", upHandler );
    
   if( moveHandler )
     node.detachEvent( "onmousemove", moveHandler );
    
   if( downHandler)
     node.detachEvent( "onmousedown", downHandler );
    
   if( clickHandler)
     node.detachEvent( "onclick", clickHandler );
    
     node.releaseCapture();

  } // endif


}




if (typeof document.documentElement.setAttributeNS != 'undefined') {

  WebBrowser.prototype.stopPropagation = function( event ) {
    if( event.stopPropagation )
      event.stopPropagation();
    if( event.preventDefault )
      event.preventDefault();
    return false;
  }

  WebBrowser.prototype.target = function( event ) {
  return event.target;
  }
  
  WebBrowser.prototype.attrName = function( event ) {
  return event.attrName;
  }

  WebBrowser.prototype.testAttrName = function( event , attrName) {
  return event.attrName == attrName;
  }

  WebBrowser.prototype.charCode = function(event) {
     return event.charCode;
  }

  WebBrowser.prototype.calculateOffsetLeft = function( node ) {
  return node.offsetLeft;    
  }
  
  WebBrowser.prototype.calculateOffsetTop = function( node ) {
  return node.offsetTop;    
  }
  
  WebBrowser.prototype.pageX = function( e ) {
    return e.pageX;    
  }
  
  WebBrowser.prototype.pageY = function( e ) {
    return e.pageY;    
  }
  
  WebBrowser.prototype.setNodePosition = function(node,left,top) {
    node.style.left = left+"px";
    node.style.top = top+"px";
  }


} else {

  WebBrowser.prototype.stopPropagation = function( event ) {
    event.cancelBubble = true;
    event.returnValue = false;
    return false;
  }

  WebBrowser.prototype.charCode = function(event) {
    return window.browser.keyCode( event );
  }

  WebBrowser.prototype.target = function( event ) {
    return event.srcElement;
  }

  WebBrowser.prototype.attrName = function( event ) {
  return event.propertyName;
  }
    
  WebBrowser.prototype.testAttrName = function( event , attrName) {
        
        var str = attrName;
        
        if( attrName.indexOf("aria-") >=0 ) {
            str = attrName.replace(/aria-/,"");
            var node = document.getElementById('test1');
            if( node )
               node.innerHTML = str.substr(0,1).toUpperCase();
            var len  = str.length;
            str = "aria" + str.substr(0,1).toUpperCase() + str.substr(1, len);
            var node = document.getElementById('test2');
//            if( node )
//               node.innerHTML = node.innerHTML + "<li>" + str + "</li>";
        }
        
        return event.propertyName == str;
  }
    
  WebBrowser.prototype.calculateOffsetLeft = function(node) {
  var offset = 0;
  
  while( node ) {
    offset += node.offsetLeft;
    node = node.offsetParent;
  }
  
  return offset;    
  }
  
  WebBrowser.prototype.calculateOffsetTop = function(node) {
  var offset = 0;
  
  while( node ) {
    offset = offset + node.offsetTop;
    node = node.offsetParent;
  }
  
  return offset;    
  }
  
  WebBrowser.prototype.pageX = function( e ) {
    return e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);    
  }
  
  WebBrowser.prototype.pageY = function( e ) {
    return e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);    
  }
  
  WebBrowser.prototype.setNodePosition = function(node,left,top) {
    offsetx = 0;
    offsety = 0;
    nnode = node.offsetParent
    while( nnode ) {
      offsetx = offsetx + nnode.offsetLeft;
      offsety = offsety + nnode.offsetTop;
      nnode = nnode.offsetParent;
    }
    node.style.left = left-offsetx+"px";
    node.style.top = top-offsety+"px";
  }
  
};


if (document.addEventListener) {

     // Functions for W3C Standards compliant implementation of adding event handlers

     WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
       elmTarget.addEventListener(sEventName, fCallback, false);
       returnValue = true;
     };

     WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
       elmTarget.removeEventListener(sEventName, fCallback, false);
       returnValue = true;
     };

     WebBrowser.prototype.addChangeEvent =  function(elmTarget, fCallback) {
      elmTarget.addEventListener("DOMAttrModified", fCallback, false);
      returnValue = true;
    };

} else {

  if(document.attachEvent) {

     // IE Specific Event handler functions
     WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
       returnValue = elmTarget.attachEvent('on' + sEventName, fCallback);
     };

     WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
       returnValue = elmTarget.detachEvent('on' + sEventName, fCallback);
     };

    WebBrowser.prototype.addChangeEvent =  function(elmTarget, fCallback) {
      returnValue = elmTarget.attachEvent("onpropertychange", fCallback);
    };

  } else {

     // For browsers that do not support W3C or IE event functions
     WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
       return false;
     };

     WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
       return false;
     };

     WebBrowser.prototype.addChangeEvent =  function(elmTarget, fCallback) {
       return false;
     };

  }

}

var browser = new WebBrowser();

  </script>

  <script type="text/javascript">
/**
*
* The CheckboxGroup object is used to maintain information about a group of checkbox widgets
*
* @constructor
*/

function CheckboxGroup( id ) {

  this.id = id;
  this.checkboxes = new Array();

}  //end CheckboxGroup

/**
* init is a subclass of CheckboxGroup and is used to initialize the event handlers
*
* @member CheckboxGroup
*
* @return none
*/

CheckboxGroup.prototype.init = function() {

  this.node = document.getElementById(this.id);

  var obj = this;

  for( var i = 0; i < this.checkboxes.length; i++ ) {
   this.checkboxes[i].init( obj );
  } // endfor  
  
  // Add event handlers for checking a checkbox group
  browser.addEvent(this.node, "keydown", function(event) {handleCheckboxGroupKeyDownEvent(event, obj); }, false);
  browser.addEvent(this.node, "keypress", function(event) {handleCheckboxGroupKeyPressEvent(event, obj); }, false);
  browser.addEvent(this.node, "click",   function(event) {handleCheckboxGroupClickEvent(event, obj); },   false);
  
  // Add event handlers for a checkboxgroup geeting and losing focus
  browser.addEvent(this.node, "focus", function(event) {handleCheckboxGroupFocusEvent(event, obj);}, false);
  browser.addEvent(this.node, "blur",  function(event) {handleCheckboxGroupBlurEvent(event, obj); }, false);
} //end CheckboxGroup.prototype.init

/**
* add is a subclass of CheckboxGroup and adds a checkbox object to the CheckboxGroup list
*
* @member CheckboxGroup
*
* @param ( Checkbox object ) obj Checkbox to be added to checkbox group
*
* @return none
*/

CheckboxGroup.prototype.add = function( obj ) {
  
  this.checkboxes[this.checkboxes.length] = obj;

} //CheckboxGroup.prototype.add

/**
* setCheckboxGroupState
*
* @param ( CheckboxGroup object ) checkbox_group  CheckboxGroup to toggle state
*
* @return none
*/

function setCheckboxGroupState( checkbox_group ) {
  
  var count = 0;

    //  count number of checked checkboxs
  for(var i = 0; i < checkbox_group.checkboxes.length; i++ ) {
    
       if( checkbox_group.checkboxes[i].node.getAttribute("aria-checked") == "true")
       count++;
  
  }  // endfor

    if( count == checkbox_group.checkboxes.length ) {
    // check the group box if all other checkboxes are checked
      checkbox_group.node.setAttribute("aria-checked", "true");
    
  } else {
  
    if ( count == 0 ) {
    // no check in the group box if none of the other checkboxes are checked
        checkbox_group.node.setAttribute("aria-checked", "false");
    
    } else {
    // If there are any checkboxes checked, but not all, check the group box as mixed
        checkbox_group.node.setAttribute("aria-checked", "mixed");
  
    } // endif
    
  } // endif
  
  // Kick IE 7 to update styling based upon changes in attribute values
  checkbox_group.node.className += "";
} // end setCheckboxGroupState


/**
* toggleCheckboxGroup is called by event handlers to toggle the state of the checkbox
*
* @param ( CheckboxGroup object ) checkbox_group  CheckboxGroup to toggle state
*
* @return none
*/

toggleCheckboxGroup = function( checkbox_group ) {

  if (checkbox_group.node.getAttribute("aria-checked") == "true") {

    // If the checkbox is currently checked set the state to unchecked  

    checkbox_group.node.setAttribute("aria-checked", "false");
  
  // Kick IE 7 to update styling based upon changes in attribute values
  checkbox_group.node.className += "";
    
  // Uncheck all the checkboxes in the group
  for(var i = 0; i < checkbox_group.checkboxes.length; i++ ) {
    
       checkbox_group.checkboxes[i].node.setAttribute("aria-checked", "false");
  
     // Kick IE 7 to update styling based upon changes in attribute values
     checkbox_group.checkboxes[i].node.className += "";
    
  }  // endfor

  } else {

    // If the checkbox is currently unchecked set the state to checked  

    checkbox_group.node.setAttribute("aria-checked", "true");

  // Kick IE 7 to update styling based upon changes in attribute values
  checkbox_group.node.className += "";
    
  // Check all the checkboxes in the group
  for(var i = 0; i < checkbox_group.checkboxes.length; i++ ) {
    
       checkbox_group.checkboxes[i].node.setAttribute("aria-checked", "true");
    
     // Kick IE 7 to update styling based upon changes in attribute values
     checkbox_group.checkboxes[i].node.className += "";
    
  }  // endfor

  }  // endif
  
} // end toggleCheckboxGroup

/**
* handleCheckboxGroupKeyDownEvent processes keys associated with a checkbox group
*
* @param ( event ) event is the event handler for the event
* @param ( CheckboxGroup object ) checkbox_group is the CheckboxGroup object that is the target of the keyboard event
*
* @return false to stop event propagation if mouse event was used by checkbox_group, else true
*/

handleCheckboxGroupKeyDownEvent = function(event, checkbox_group ) {
  // If IE get the IE event object
  var e = event || window.event;

  switch( browser.keyCode(e) ) {

    case KEY_SPACE:
       // When space hit toggle the checkbox group
         toggleCheckboxGroup( checkbox_group );
     // Tell browser we handled this event and not to process any other actions
         return browser.stopPropagation(e);
         break;

  }  // end switch

  return true;

} // end handleCheckboxGroupKeyDownEvent

/**
* handleCheckboxGroupKeyPressEvent processes keys associated with a checkbox group
*
* The Opera browser performs some window commands from the keypress event,
* not keydown like Firefox, Safari, and IE. This event handler consumes
* keypresses for relevant keys so that Opera behaves when the user is
* manipulating the checkboxes with the keyboard.
*
* @param ( event ) event is the event handler for the event
* @param ( CheckboxGroup object ) checkbox_group is the CheckboxGroup object that is the target of the keyboard event
*
* @return false to stop event propagation if key event was used by checkbox_group, else true
*/

handleCheckboxGroupKeyPressEvent = function(event, checkbox_group ) {
  // If IE get the IE event object
  var e = event || window.event;

  switch( browser.keyCode(e) ) {

    case KEY_SPACE:
   // Tell browser we handled this event and not to process any other actions
         return browser.stopPropagation(e);
         break;

  }  // end switch

  return true;

} // end handleCheckboxGroupKeyPressEvent

/**
* handleCheckboxGroupFocusEvent processes keys associated with a Checkbox_group
*
* @param ( event ) event is the event handler for the event
* @param ( CheckboxGroup object ) checkbox_group is the CheckboxGroup object that is the target of the keyboard event
*
* @return false if keyboard event was used by checkbox_group, else true
*/

handleCheckboxGroupFocusEvent = function(event, checkbox_group) {
  // Kick IE 7
  checkbox_group.node.className += "";

  return true;

} // end handleCheckboxGroupFocusEvent

/**
* handleCheckboxGroupBlurEvent processes keys associated with a checkbox_group
*
* @param ( event ) event is the event handler for the event
* @param ( CheckboxGroup object ) checkbox_group is the CheckboxGroup object that is the target of the keyboard event
*
* @return false if keyboard event was used by checkbox_group, else true
*/

handleCheckboxGroupBlurEvent = function(event, checkbox_group) {
  //Kick IE 7
  checkbox_group.node.className += "";

  return true;

} // end handleCheckboxGroupBlurEvent

/**
* handleCheckboxGroupClickEvent processes pointer click events with in the checkbox group
*
* @param ( event ) event is the event handler for the event
* @param ( CheckboxGroup object ) checkbox_group is the CheckboxGroup object that is the target of the pointer event
*
* @return false to stop event propagation if mouse event was used by checkbox, else true
*/

function handleCheckboxGroupClickEvent( event, checkbox_group) {
  // If IE get the IE event object
  var e = event || window.event;

  if( checkbox_group.node == browser.target(e) ) {
    // Toggle the checkbox group
      toggleCheckboxGroup( checkbox_group );
    checkbox_group.node.focus();
    // Tell browser we handled this event and not to process any other actions
      return browser.stopPropagation(e);  
  } // endif

  return true;
  
} // end handleCheckboxGroupClickEvent


/**
*
* The Checkbox object is used to maintain information about a checkbox widget
*
* @constructor
*/

function Checkbox( id ) {
  this.id = id;
} // end Checkbox


/**
* init is a subclass of Checkbox and is used to initialize the event handlers
*
* @member Checkbox
*
* @return none
*/

Checkbox.prototype.init = function( checkbox_group ) {

  this.checkbox_group = checkbox_group;
  this.node = document.getElementById(this.id);

  var obj = this;
  
  // Add event handlers for checking a checkbox
  browser.addEvent(this.node, "keydown", function(event) {handleCheckboxKeyDownEvent(event, obj); }, false);
  browser.addEvent(this.node, "keypress", function(event) {handleCheckboxKeyPressEvent(event, obj); }, false);
  browser.addEvent(this.node, "click",   function(event) {handleCheckboxClickEvent(event, obj); },   false);
  
  // Add event handlers for a checkbox getting and losing focus
  browser.addEvent(this.node, "focus", function(event) {handleCheckboxFocusEvent(event, obj);}, false);
  browser.addEvent(this.node, "blur",  function(event) {handleCheckboxBlurEvent(event, obj); }, false);
  
} // Checkbox.prototype.init

/**
* toggleCheckbox is called by event handlers to toggle the state of the checkbox
*
* @param ( Checkbox object ) checkbox  Checkbox to toggle state
*
* @return none
*/

toggleCheckbox = function( checkbox ) {

  if (checkbox.node.getAttribute("aria-checked") == "true") {

    // If the checkbox is currently checked set the state to unchecked  

    checkbox.node.setAttribute("aria-checked", "false");

  // Kick IE 7 to update styling based upon changes in attribute values
  checkbox.node.className += "";
    
  } else {

    // If the checkbox is currently unchecked set the state to checked  

    checkbox.node.setAttribute("aria-checked", "true");

  // Kick IE 7 to update styling based upon changes in attribute values
  checkbox.node.className += "";
  
  }  // endif

  setCheckboxGroupState( checkbox.checkbox_group );
  
} // end toggleCheckbox

/**
* handleCheckboxKeyDownEvent processes keys associated with a checkbox
*
* @param ( event ) event is the event handler for the event
* @param ( Checkbox object ) checkbox is the Checkbox object that is the target of the keyboard event
*
* @return false to stop event propagation if mouse event was used by checkbox, else true
*/

handleCheckboxKeyDownEvent = function(event, checkbox ) {
  // If IE get the IE event object
  var e = event || window.event;

  switch( browser.keyCode(e) ) {

    case KEY_SPACE:
       // When space hit toggle the checkbox
         toggleCheckbox( checkbox );
     // Tell browser we handled this event and not to process any other actions
         return browser.stopPropagation(e);
         break;

  }  // end switch

  return true;

} // end handleCheckboxKeyDownEvent

/**
* handleCheckboxKeyPressEvent processes keys associated with a checkbox
*
* The Opera browser performs some window commands from the keypress event,
* not keydown like Firefox, Safari, and IE. This event handler consumes
* keypresses for relevant keys so that Opera behaves when the user is
* manipulating the checkboxes with the keyboard.
*
* @param ( event ) event is the event handler for the event
* @param ( Checkbox object ) checkbox_group is the Checkbox object that is the target of the keyboard event
*
* @return false to stop event propagation if key event was used by checkbox, else true
*/

handleCheckboxKeyPressEvent = function(event, checkbox ) {
  // If IE get the IE event object
  var e = event || window.event;

  switch( browser.keyCode(e) ) {

    case KEY_SPACE:
   // Tell browser we handled this event and not to process any other actions
         return browser.stopPropagation(e);
         break;

  }  // end switch

  return true;

} // end handleCheckboxKeyPressEvent

/**
* handleCheckboxFocusEvent processes keys associated with a Checkbox
*
* @param ( event ) event is the event handler for the event
* @param ( Checkbox object ) checkbox is the Checkbox object that is the target of the keyboard event
*
* @return false if keyboard event was used by checkbox, else true
*/

handleCheckboxFocusEvent = function(event, checkbox) {
  //Kick IE 7
  checkbox.node.className += "";

  return true;

} // end handleCheckboxFocusEvent

/**
* handleCheckboxBlurEvent processes keys associated with a checkbox
*
* @param ( event ) event is the event handler for the event
* @param ( Checkbox object ) checkbox is the Checkbox object that is the target of the keyboard event
*
* @return false if keyboard event was used by checkbox, else true
*/

handleCheckboxBlurEvent = function(event, checkbox) {
  //KicK IE 7
  checkbox.node.className += "";

  return true;

} // end handleCheckboxBlurEvent

/**
* handleCheckboxClickEvent processes pointer click events with in the checkbox
*
* @param ( event ) event is the event handler for the event
* @param ( Checkbox object ) checkbox is the Checkbox object that is the target of the pointer event
*
* @return false to stop event propagation if mouse event was used by checkbox, else true
*/

function handleCheckboxClickEvent( event, checkbox ) {
  // If IE get the IE event object
  var e = event || window.event;

  if( checkbox.node == browser.target(e) ) {
    // Toggle the checkbox
      toggleCheckbox( checkbox );
    checkbox.node.focus();
    // Tell browser we handled this event and not to process any other actions
      return browser.stopPropagation(e);
  } // endif

  return true;
} // end handleCheckboxClickEvent

  </script>

  <style type="text/css">
/* Example 3 CSS */

ul.checkboxes {
        margin: 0;
        padding: 0;
    }

ul.checkboxes li {
        padding: 0;
        margin: 0;
        margin-left: 2.5em;
        padding-left: 2em;
        list-style: none;
        border: transparent 2px solid;
        width: 7em;
    }

li[aria-checked="false"]  {
      background-repeat: no-repeat;
      background-position: .5em center;
      background-image: url('images/unchecked.gif');
    }

li[aria-checked="true"] {
      background-repeat: no-repeat;
      background-position: .5em center;
      background-image: url('images/checked.gif');
    }

li[aria-checked="mixed"] {
      background-repeat: no-repeat;
      background-position: .5em center;
      background-image: url('images/mixed.gif');
    
    }
    
ul.checkboxes li:first-child {
        margin-left: 1em;
        }

li[aria-checked]:hover {
   border: gray 2px solid;
}

li[aria-checked]:focus,
li[aria-checked]:active {
    border: black 2px solid;
}

.hidden {
  position: absolute;
  top: -30em;
  left: -300em;
}

  </style>