views:

17

answers:

2

As the title states I need some help on how to link this Jquery script for a show / hide effect to a radio button selection.

HTML

<tr>
<td><input type="radio" name="es_custom_reg" value="Y" /></td>
<td>Yes</td>
<td><input type="radio" name="es_custom_reg" value="N" /></td>
<td>No</td>
</tr>

Javascript

<script src="scripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
      $(document).ready(function(){

   $('#slide').hide();

      $('a').click(function(){

   $('#slide').show('slow');

   });

   $('a#close').click(function(){
     $('#slide').hide('slow');
  })

    });
</script>
+1  A: 

use selector

jQuery("input[name='es_custom_reg']") this will give you reference to both the radio buttons. Use each.

jQuery("input[name='es_custom_reg']").each to loop through these two selections and then on the condition of .html()=='yes' execute your code.

Hope this helps.

sushil bharwani
To clarify, the javascript function is currently attached to a link on another page which creates the effect perfectly, what I want to do is take this javascript snippet and edit it to respond to the radio button on the html found on this page.
NewB
+1  A: 

Try this:

$(function() {
    $('#slide').hide();
    $(':radio[name=es_custom_reg]').click(function() {
        var value = $(this).val();
        if (value === 'Y') {
            $('#slide').show('slow');
        } else if (value === 'N') {
            $('#slide').hide('slow');
        }
    });
});

And here's a demo.

Darin Dimitrov
Bingo, that solved it. Thank you so much for that
NewB