Checkbox Example 6: JQuery

<div role="application">

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

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

  <li role="checkbox"
      tabindex="0"
      aria-checked="false"
      aria-describedby="cond desc1">
      <img src="images/unchecked.gif" alt="" role="presentation">
      Lettuce
  </li>
            
  <li role="checkbox"
      tabindex="0"
      aria-checked="true"
      aria-describedby="cond desc2">
      <img src="images/checked.gif" alt="" role="presentation">
      Tomato
   </li>
            
   <li role="checkbox"
       tabindex="0"
       aria-checked="true"
       aria-describedby="cond desc3">
       <img src="images/checked.gif" alt="" role="presentation">
       Mustard
   </li>
            
   <li role="checkbox"
       tabindex="0"
       aria-checked="true"
       aria-describedby="cond desc4">
       <img src="images/checked.gif" alt="" role="presentation">
       Sprouts
  </li>            
  
</ul>
<div id="desc1" class="offscreen">The best available organic romaine lettuce grown locally.</div>
<div id="desc2" class="offscreen">These organically grown beef steak tomatoes are vide rippened.</div>
<div id="desc3" class="offscreen">This is a gourmet mustard from Germany.</div>
<div id="desc4" class="offscreen">These organically grown alfalfa sprouts are a great addition to any sandwich.</div>
</div>

  <script type="text/javascript">
var KEY_SPACE = 32;

$(document).ready(
   function() {
     $('ul.checkboxes li').click(
       function() {
      
         if( $(this).attr('aria-checked') == 'true') {
           $(this).attr('aria-checked', 'false');
           $(this).children('img').attr('src','images/unchecked.gif');
         } else {
            $(this).attr('aria-checked', 'true');        
           $(this).children('img').attr('src','images/checked.gif');
         }  // endif
    
       } // endif click event handler function
    
     ); // end click event handler

     /**
      * 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.
      */
     $('ul.checkboxes li').keypress(function(e) {

       if (e.which == KEY_SPACE) {
         e.stopPropagation;
         return false;
       }

       return true;
      }); // end keypress handler

     $('ul.checkboxes li').keydown(
       function(e) {
      
         if( e.which == KEY_SPACE ) {
           if( $(this).attr('aria-checked') == 'true') {
             $(this).attr('aria-checked', 'false');
             $(this).children('img').attr('src','images/unchecked.gif');
           } else {
             $(this).attr('aria-checked', 'true');        
             $(this).children('img').attr('src','images/checked.gif');
           }  // endif
           e.stopPropagation();
           e.preventDefault();
           return false;
         } // endif
         return true;
       } // endif keydown event handler function
    
     ); // end keydown event handler
  
   }  // end ready function
  
); // end ready event
  </script>

  <style type="text/css">
/* Example 1 CSS
// This example uses CSS background-image to visual display checkbox status
*/
    
    ul.checkboxes {
        margin: 0;
        padding: 0;    
    }

    ul.checkboxes  li   {
        padding: 0;
        margin: 0;
        margin-left: 1em;
        padding: 4px;
        list-style: none;
        width: 6em;    
    }
        
    ul.checkboxes li:hover {
        padding: 2px;
        border: gray 2px solid;
    }

    ul.checkboxes li:focus,
    ul.checkboxes li:active {
        padding: 2px;
        border: black 2px solid;
   }

    .offscreen {
      position: absolute;
    left: -200em;
    top: -20em;
    }

      

  </style>