MVC JQuery Show/Hide divs per radio button selected RSS

• • Reply
  

  caligali

  Member

  83 Points

  268 Posts

  MVC JQuery Show/Hide divs per radio button selected

  Apr 29, 2012 12:42 AM|LINK

  I have 2 radio buttons in the view:

  <input type="radio" name="gender" id="female" />Female
              <input type="radio" name="gender" id="male" />Male

  Followed by 2 divs:

    <div class="infobox hidden" id="GenderIsFemale">
                  <h4>
                      We love pink!
                  </h4>
    </div>
    <div class="infobox hidden" id="GenderIsMale">
                  <h4>
                      We love blue!
                  </h4>
    </div>

  I'm trying to write the JQuery that would show the div based on the radio selection, here is what I have:

   <script type="text/javascript">
  
  $(document).ready(function () {
          $('#female').change(function () {
              $('GenderIsMale').hide();
  
  
              $('GenderIsFemale').show();
          });
  
          $('#male').change(function () {
              $('GenderIsFemale').hide();
  
              $('GenderIsMale').show();
          });
  
  
      });
      
  </script>

  This JQuery is not working. What am I missing? Thanks!
  
  
  
  

  --
  and learning..
• • Reply
  

  IgorKitsula

  Member

  144 Points

  33 Posts

  Re: MVC JQuery Show/Hide divs per radio button selected

  Apr 29, 2012 01:25 AM|LINK

  You miss # in selectors by id.

  $('#GenderIsMale')

  Complete code: http://jsfiddle.net/U6Akv/

  Please "Mark as answer", if my post helps you...
  - Igor
  Weblog: http://kitsula.com
  • Marked as answer by caligali on Apr 29, 2012 04:45 AM