Question

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

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

Answer 1

您有两个id teacher的元素。

id意味着是一个唯一的属性（只有一个元素有一个特定的id），jQuery认为是真的。如果你有两个具有相同id的元素，jQuery总会选择第一个。

话虽如此，您的问题的解决方案是将id更改为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();
    }
});

Answer 2

要在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();
    }
});

jquery slideUP / DOWN工作搞笑

2 个答案: