jquery滑動UP/DOWN工作好笑

在我的代碼下面，當我選擇標記爲'是'的單選按鈕時，它滑下來。但是，當我點擊標有'不'的標籤時，它不會向上滑動。爲什麼是這樣？jquery滑動UP/DOWN工作好笑

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

來源

2012-06-03 user1015214

'id'屬性在HTML文檔中應該是唯一的。使用'class'屬性或'input：radio'選擇器來代替單選按鈕共享一個id。 –

你必須與teacher的id兩個元素。

id被認爲是一個獨特的屬性（只有一個元素有一個特定的id）和jQuery假設爲true。如果你有兩個相同的元素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(); 
    } 
});

來源

2012-06-03 05:40:21 Blender

不錯的答案+1，這裏是一個現場演示：http：//jsfiddle.net/wyZYm/ –

對於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-03 05:45:42

jquery滑動UP/DOWN工作好笑

回答

相關問題