jquery slideUP/DOWN working funny

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

Для получения radiobutton значения в Jquery вы можете просто сделать:

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