如何通过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为否且ID 是

的按钮

如果用户点击是，那么应该会显示类（auth_other）的表格行，如果选择否，那么它应该会消失

2。当用户点击啊单选按钮时，类（auth_type）的表格行应该会消失。

一切工作正常现在问题是，当用户选择否并点击啊单选按钮然后表格行 auth_other 出现了不应该。

我尝试处理它并在 esp单选按钮

的jquery代码中添加以下行

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

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

但是没有用......

我认为当用户点击没有和啊时，我应该强行出现。

当用户点击时，我可以通过“是”按钮强制检查带有“auth_type”类的单选按钮的机制>“啊”或者来自“啊”以支持“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");                     
    }
});

根据您的描述，您可能还希望在选择.auth_other无线电时隐藏#ah（可能是从较早的用户互动中显示）：

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

<强> See it in action