1

在下面的代码中，当我选择标记为“是”的单选按钮时，它确实会向下滑动。但是，当我单击标记为“否”的那个时，它不会向上滑动。为什么是这样？

html:

<label>Yes</label><input type="radio" name="teacher" id="teacher" value="yes"/>
<label>No</label><input type="radio" name="teacher" id="teacher" value="no"/><br>

jQuery：

$("#teacher").click(function() {    
    if($(this).val() === "yes")
    {
        $("#teacher-info").slideDown();
    }
    else if($(this).val() === "no")
    {
        $("#teacher-info").slideUp();
    }
});
4

2 回答 2

2

您有两个带有idof 的元素teacher。

id意味着是一个独特的属性（只有一个元素有一个特定的id），而 jQuery 假设这是真的。如果你有两个相同的元素id，jQuery 总是选择第一个。

话虽这么说，您的问题的解决方案是将 a 更改id为 a class，它旨在用于许多元素。

HTML：

<label>Yes</label>
<input type="radio" name="teacher" class="teacher" value="yes"/>

<label>No</label>
<input type="radio" name="teacher" class="teacher" value="no"/>

JavaScript：

$(".teacher").click(function() {    
    if($(this).val() === "yes")
    {
        $("#teacher-info").slideDown();
    }
    else if($(this).val() === "no")
    {
        $("#teacher-info").slideUp();
    }
});

顺便说一句，由于您的单选按钮只有两种状态（yes和no），您的代码可以简化：

$(".teacher").click(function() {    
    if ($(this).val() === "yes") {
        $("#teacher-info").slideDown();
    } else {
        $("#teacher-info").slideUp();
    }
});
于 2012-06-03T05:40:21.127 回答
0

要在 Jquery 中获取radiobutton值，您可以简单地执行以下操作：

$('input:radio[name=teacher]:checked').val();

首先更改您的代码并添加class：

<label>Yes</label>
<input type="radio" name="teacher" class="teacher" value="yes"/>

<label>No</label>
<input type="radio" name="teacher" class="teacher" value="no"/>

所以现在改变你的代码是这样的：

$(".teacher").click(function() {  
    var btnValue = $('input:radio[name=teacher]:checked').val()
    if(btnValue === "yes")
    {
        $("#teacher-info").slideDown();
    }
    else if(btnValue === "no")
    {
        $("#teacher-info").slideUp();
    }
});
于 2012-06-03T05:45:42.087 回答