Radio Example 4: JQuery

<div role="application">

  <h3 id="rg1_label">Lunch Options</h3>

  <ul class="radiogroup"
      id="rg1"
      role="radiogroup"
      aria-labelledby="rg1_label"
   >
    <li id="r1"
      class="first"
      tabindex="0"
      role="radio"
      aria-checked="false">
      <img role="presentation" src="images/unchecked.gif" alt=""/>
      Thai
    </li>
    <li id="r2"
        tabindex="-1"
        role="radio"
        aria-checked="false">
      <img role="presentation" src="images/unchecked.gif" alt=""/>
      Subway
    </li>
    <li id="r3"
        tabindex="-1"
        role="radio"
        aria-checked="false">
      <img role="presentation" src="images/unchecked.gif" alt=""/>
      Jimmy Johns
    </li>
    <li id="r4"
        tabindex="-1"
        role="radio"
        aria-checked="true">
      <img role="presentation" src="images/unchecked.gif" alt=""/>
      Radio Maria
    </li>
    <li id="r5"
        class="last"
        tabindex="0"
        role="radio"
        aria-checked="false">
      <img role="presentation" src="images/unchecked.gif" alt=""/>
      Rainbow Gardens
    </li>  
  </ul>  

<!-- Start of second Radio Group  -->

  <h3 id="rg2_label">Drink Options</h3>
  
  <ul id="rg2"
     class="radiogroup"
     role="radiogroup"
     aria-labelledby="rg2_label"
   >
    <li id="r6"  class="first" tabindex="0" role="radio" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Water</li>
    <li id="r7"  tabindex="-1" role="radio" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Tea</li>
    <li id="r8"  tabindex="-1" role="radio" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Coffee</li>
    <li id="r9"  tabindex="-1" role="radio" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Cola</li>
    <li id="r10" class="last" tabindex="0" role="radio" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Ginger Ale</li>  
  </ul>  

</div>

  <script type="text/javascript">
var KEY_SPACE = 32;
var KEY_UP       = 38;
var KEY_DOWN     = 40;

$(document).ready(
   function() {
     $('ul.radiogroup li').click(
       function() {
      
         $(this).siblings('li').each(
           function() {            
             $(this).attr('aria-checked', 'false');
             $(this).attr('tabindex', '-1');
             $(this).children('img').attr('src','images/unchecked.gif');        
           } // end each function
         ) // end each
      
         $(this).attr('aria-checked', 'true');        
         $(this).children('img').attr('src','images/checked.gif');
         $(this).attr('tabindex', '0');
    
       } // endif click event handler function
    
     ); // end click event handler

     $('ul.radiogroup li').keydown(
       function(e) {
      
         if( e.keyCode == KEY_SPACE ||
             e.keyCode == KEY_UP ||
             e.keyCode == KEY_DOWN) {
        
           $(this).parent().children('li').each(
             function() {            
               $(this).attr('aria-checked', 'false');
               $(this).attr('tabindex', '-1');
               $(this).children('img').attr('src','images/unchecked.gif');        
             } // end each function
           ) // end each
      
           var selected_node = this;          
        
           if( e.keyCode == KEY_UP ) {
             selected_node = $(this).prev();
             if( !$(selected_node).length ) {
               selected_node = $(this).parent().children('li:last');
             } // endif
           } else {
             if( e.keyCode == KEY_DOWN ) {
               selected_node = $(this).next();
               if( !$(selected_node).length ) {
                 selected_node = $(this).parent().children('li:first');
               } // endif
             } // endif
           } // end if else
                    
           $(selected_node).attr('aria-checked', 'true');        
           $(selected_node).children('img').attr('src','images/checked.gif');
           $(selected_node).attr('tabindex', '0');
           selected_node.focus();          
          
           e.stopPropagation();
           e.preventDefault();
           return false;
         } // endif
         return true;
       } // endif keydown event handler function

     ); // end keydown event handler

     $('ul.radiogroup li.first').focus(
       function() {
      
         if( $(this).siblings('li:last').attr('tabindex') == '0'  &&
             $(this).siblings('li:last').attr('aria-checked') == 'false' ) {
           $(this).siblings('li:last').attr('tabindex', '-1');
          }
      } // endif focus event handler function
    
     ); // end focus event handler

     $('ul.radiogroup li.last').focus(
       function() {
      
         if( $(this).siblings('li:first').attr('tabindex') == '0'  &&
             $(this).siblings('li:first').attr('aria-checked') == 'false' ) {
           $(this).siblings('li:first').attr('tabindex', '-1');
          }
          
      } // endif focus event handler function
    
     ); // end focus event handler

     $('ul.radiogroup li.first').blur(
       function() {
      
         if( $(this).attr('tabindex') == '0'  &&
             $(this).attr('aria-checked') == 'false' ) {
           $(this).siblings('li:last').attr('tabindex', '0');
          }
      } // endif blur event handler function
    
     ); // end blur event handler

     $('ul.radiogroup li.last').blur(
       function() {
         if( $(this).attr('tabindex') == '0'  &&
             $(this).attr('aria-checked') == 'false' ) {
           $(this).siblings('li:first').attr('tabindex','0');
          }

      } // endif blur event handler function
    
     ); // end blur 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.radiogroup {
        margin: 0;
        padding: 0;    
    }

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

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

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

      

  </style>