如何通过jquery检查与单选按钮关联的值

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");
   });
});

我的网页上有两个单选按钮，id (#ah)和id (#esp)

1。当用户单击esp单选按钮时，应该出现一个具有类(auth_type)的表行。它也有两个单选按钮，id no和id yes

如果用户单击yes，则会出现带有类(auth_other)的表行，如果选择no，则会消失

2。当用户单击ah单选按钮时，具有类(auth_type)的表行应该消失。

一切都工作得很好，现在问题是，当用户选择no并单击ah单选按钮也时，表行与类auth_other出现不应该。

我试图处理它，并添加以下行jquery代码esp单选按钮

var sel = $(":radio[name='auth_opt']:checked").val();   
if(sel=='n')
     $(".auth_type").slideDown("normal");

but not working…

我认为当用户点击no以及ah时，我应该让它强制出现。

是否有任何机制可以强制具有类"auth_type"的单选按钮默认在"yes"按钮上进行检查，每当用户单击"ah"或从"ah"回到"esp"。我想这也许能解决问题。

我是新的jquery，但与javascript工作过，所以如果有人能告诉我有什么问题与上述jquery代码?

整个HTML代码很长，所以只显示类"auth_type"．如果需要，我会添加类"auth_other"的代码。。

..
....
<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

您真的不需要特别关注#yes和#no按钮。你只需要说"当点击.auth_type内的单选按钮之一时，隐藏或显示.auth_other行取决于这两个按钮中的哪一个"。下面是这段代码的作用:

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

此外，您应该而不是将附加click事件处理程序的代码放在#esp单击处理程序本身中:

$("#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");                     
    }
});

根据您的描述，您可能还希望在选择#ah单选时隐藏.auth_other(它可能从先前的用户交互中显示):

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

查看效果