title: Jquery Radio Button for Search Filter
body: <p>Can someone help me here...Am thinking of using a feature found at <a href="http://tympanus.net/Tutorials/UIElements/SearchBox/" rel="nofollow">http://tympanus.net/Tutorials/UIElements/SearchBox/</a> but it uses checkbox instead of radio. I want the dropdown to show 4 radio buttons and the user should be able to select just one option. I tried a variety of options and it does not work. I will be using the latest jquery -- 1.8</p>
  
  <p>I tried using prop, attr and read the forum but of no help. Your knowledge would be much appreciated.</p>
  
  <p>My html is below</p>
  
  <pre><code>    &lt;div class="content"&gt;
          &lt;h1&gt;UI Elements&lt;/h1&gt;
          &lt;div class="box"&gt;
              &lt;h2&gt;Search Box with Filter Demo&lt;/h2&gt;
              &lt;form id="ui_element" class="sb_wrapper"&gt;
                  &lt;p&gt;
                      &lt;span class="sb_down"&gt;&lt;/span&gt;
                      &lt;input class="sb_input" type="text"/&gt;
                      &lt;input class="sb_search" type="submit" value=""/&gt;
                  &lt;/p&gt;
                  &lt;ul class="sb_dropdown" style="display:none;"&gt;
                      &lt;li class="sb_filter"&gt;Filter your search&lt;/li&gt;
                      &lt;li&gt;&lt;input type="radio"/&gt;&lt;label for="all"&gt;&lt;strong&gt;All Categories&lt;/strong&gt;&lt;/label&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;input type="radio"/&gt;&lt;label for="Automotive"&gt;Automotive&lt;/label&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;input type="radio"/&gt;&lt;label for="Baby"&gt;Baby&lt;/label&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;input type="radio"/&gt;&lt;label for="Beauty"&gt;Beautys&lt;/label&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and original script is below --</p>
  
  <pre><code>        $(function() {
              /**
              * the element
              */
              var $ui         = $('#ui_element');
  
              /**
              * on focus and on click display the dropdown, 
              * and change the arrow image
              */
              $ui.find('.sb_input').bind('focus click',function(){
                  $ui.find('.sb_down')
                     .addClass('sb_up')
                     .removeClass('sb_down')
                     .andSelf()
                     .find('.sb_dropdown')
                     .show();
              });
  
              /**
              * on mouse leave hide the dropdown, 
              * and change the arrow image
              */
              $ui.bind('mouseleave',function(){
                  $ui.find('.sb_up')
                     .addClass('sb_down')
                     .removeClass('sb_up')
                     .andSelf()
                     .find('.sb_dropdown')
                     .hide();
              });
  
              /**
              * selecting all checkboxes
              */
              $ui.find('.sb_dropdown').find('label[for="all"]').prev().bind('click',function(){
                  $(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);
              });
          });
  </code></pre>