jQuery和If语句用于取消选择单选按钮

Question

嗯，我陷入了困境并一直在头疼，试图弄清楚我的错误所在。

场景:

我有一个带有是/否答案的问题(即2个单选按钮)。当用户选择是或否时，我调用函数来.toggle()隐藏的div以显示一个链接。这很好。如果他们回过头再次检查那个是/否，它会因为.toggle()而消失。

我的问题是，如果用户点击 No（并显示了链接），然后点击 Yes，我希望显示由 No 结果展示的链接消失，反之亦然。

因此，基本上每次只显示一个链接。

我想到也许 if 语句可以解决问题，但我似乎做不对。

我的代码:

<div id="Question1">
  <div>Do you kazoo?</div>
  <input type="radio" ID="Q1RB1" runat="server" value="Yes" text="Yes" name="RadioGroup1"/>Yes<br />
  <input type="radio" ID="Q1RB2" runat="server" value="No" text="No" name="RadioGroup1"/> No
  <span id="Q1RB1Results" style="display:none">&nbsp; &nbsp; <a href=#>Click here</a></span>  
  <span id="Q1RB2Results" style="display:none">&nbsp; &nbsp; <a href=#>Click here</a></span>
 </div>

我的 jQuery 代码适用于每个单独的单选按钮：

    $("input[id$=Q1RB1]:radio").change(function () {
        $("[id$=Q1RB1Results]").toggle();
    });

    $("input[id$=Q1RB2]:radio").change(function () {
        $("[id$=Q1RB2Results]").toggle();

    });    

这是我正在尝试让其工作的 If 语句。我是不是走错了路？

    if ($("input[id$=Q1RB2]").is(":checked")) {
        $("input[id$=Q1RB2]:radio").change(function () {
            $("[id$=Q1RB2Results]").toggle();
        });
    });

感谢任何想法/建议。我在Stackoverflow和互联网上尝试了许多答案，但似乎无法弄清楚我做错了什么。
更新：我在JSFiddle上放了一个样本表格和对话框。 http://jsfiddle.net/Valien/7uN6z/4/ 我尝试了这里提到的一些解决方案，但无法使它们正常工作，所以不确定我做错了什么。

- Valien

Answer 1

当你在 JQuery 中注册事件监听器（.change，.click，.blur等），Javascript 引擎会匹配选择器并在那个时刻应用它们。考虑到这一点，你可以重新排列你的代码（接近正确），改为如下方式，应该就能解决问题：

/* The function you're about to define applies to all radio button 
   inputs whose ID ends with Q1RB2 */
$("input[id$=Q1RB2]:radio").change(function()
{
    /* Inside the change function, $(this) refers to the instance that
       was changed. So, this checks to see if the instance that was just 
       changed is currently checked, after being changed. */
    if ($(this).is(":checked"))
    {
        // If that was the case, then toggle the item
        $("[id$=Q1RB2Results]").toggle();
    }
}); 

- Zach Rattner

---

请记住他正在切换另一个控件，而不是 $(this)。你的代码相当于总是使单选按钮未被选中。 - Blindy

mcgrailm：这是 JQuery 支持的所有选择器列表：http://api.jquery.com/category/selectors/ - Zach Rattner

尝试过了，有点效果。打算重新思考并再试一次。当时实施时太累了。 - Valien

编程疲劳几乎和酒后驾车一样糟糕。 - Zach Rattner

好的，我刚把这个放到JSFiddle上 - http://jsfiddle.net/Valien/6WmaY/ - 它半工作，所以我认为想法已经在那里了...现在要让它完全工作！ :) - Valien

Answer 2

我相信这就是你需要的:

// declare common variables so it's easier to target
var question = $("#Question1"),
    group = question.find("input[name='RadioGroup1']"),
    span = question.find("span");

// change listener for each radio button group
group.click(function(){ 
    var id = $(this).attr("id"); // get the radio button id for reference
    span.each(function(){ // loop through each span and check which one to hide/show
        var item = $(this);
        if (item.attr("id")===id+"Results") { item.show(); } else { item.hide(); }
    });
});

- hmabesa

Answer 3

试试这个：

$('input:radio[name=RadioGroup1]').change(function(){
    var show = "#" + $(this).attr('id') + 'Results';
    $('#Question1 span').hide();
    $(show).show();
});

- dgilland