如何通过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");

   });
});

我的网页上有两个单选按钮

当用户点击 (#ah) 和 id (#esp) 1. 时， >esp 单选按钮 然后应该出现一个带有 class(auth_type) 的表格行。它还有两个单选按钮，其中 id no 和 id 是

如果用户点击是，然后应该出现一个带有类（auth_other）的表格行，如果选择否，那么它应该消失

2. > 当用户单击 ah 单选按钮时，带有 class (auth_type) 的表格行应该消失。

现在一切都工作正常，问题是当用户选择否并单击ah单选按钮时，则具有类auth_other的表行是出现了不应该出现的情况。

我尝试处理它，并向esp单选按钮的jquery代码添加了以下几行

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

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

，但没有起作用...

我认为当用户单击no时，也会像< strong>啊那我就让它强行出现吧。

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

我是 jquery 新手，但使用过 javascript，所以如果有人可以告诉我上面的 jquery 代码有问题吗？

整个 HTML 代码非常长，因此仅显示“auth_type”类的 HTML。 如果需要，我也会添加“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");
});

<一href="http://jsfiddle.net/USdyM/" rel="nofollow">查看实际操作。