Question

$(document).ready(function(){
    $("#esp").click(function(){ 
        $(".auth_type").slideDown("normal");
        $("#no").click(function(){
             $(".auth_other").slideUp("normal");                     
        });
        $("#yes").click(function(){
             $(".auth_other").slideDown("normal");           
        });
   });
            
   $("#ah").click(function(){ 
        $(".auth_type").slideUp("normal");

   });
});

there are two radio buttons on my web page with id (#ah) and id (#esp)

1. when user click on esp radio button then a table row with class(auth_type) should appear.It also have two radio buttons in it with id no and id yes

if user clicks yes then further a table row with class (auth_other) should appear and if no selected then it should disappear

2. when user clicks on ah radio button the then table row with class (auth_type) should disappear.

Everything is working fine also now problem is that when when user have selected no and clicked on ah radio button also then table row with class auth_other is appeared which should not be .

I tried to handle it and added following lines to the jquery code for esp radio button

var sel = $(":radio[name='auth_opt']:checked").val();   

if(sel=='n')
     $(".auth_type").slideDown("normal");

but din’t worked …

I thought that when user clicked no as wll as ah then i should make it forcefully appeared .

Is there any mechanism by which i can force the radio buttons with class "auth_type" to be checked by default on "yes" button whenever user clicked on "ah" or from "ah" to back on "esp".I think that may solve the problem.

I am new to jquery but have worked with javascript so if someone could tell me Is there something wrong with the above jquery code??

The Whole HTML code is very long so just showing the HTML for the class "auth_type" .
If needed i will add the code for class "auth_other" also.

..
....
<tr class="auth_type" style="display:none">
<td width="400" height="40">Apply Authentication</td>
<td>
  <table width="100%">
  <tr>
  <td style="text-align:center">
  <input type="radio" name="auth_opt" value="y" id="yes" align="left" checked="checked" />yes
  </td>

  <td style="text-align:center">
  <input type="radio" name="auth_opt" value="n" id="no" align="right"/>no
  </td>

  </tr>
  </table>


  </td>
  </tr>
...
...

Answer 1

You don’t really need to concern yourself with the #yes and #no button specifically. You just need to say “when one of the radio buttons inside .auth_type is clicked, hide or show the .auth_other row depending on which of the two buttons it was”. This is what this code does:

$(".auth_type input:radio").click(function() {
    if ($(this).val() == "y") {
        $(".auth_other").slideDown("normal");                     
    }
    else {
        $(".auth_other").slideUp("normal");                     
    }
});

Also, you should not put the code that attaches the click event handlers inside the #esp click handler itself:

$("#esp").click(function(){ 
    $(".auth_type").slideDown("normal");

    // NOT IN HERE!
});

// OUT HERE IS CORRECT
$(".auth_type input:radio").click(function() {
    if ($(this).val() == "y") {
        $(".auth_other").slideDown("normal");                     
    }
    else {
        $(".auth_other").slideUp("normal");                     
    }
});

From what you describe, you might also want to hide the .auth_other when the #ah radio is selected (it might be showing from an earlier user interaction):

$("#ah").click(function(){ 
     $(".auth_type").add(".auth_other").slideUp("normal");
});

See it in action.