jQuery單選按鈕顯示/隱藏

我試圖用單選按鈕來顯示和隱藏div，但無法得到下面的工作，任何幫助將是偉大的？jQuery單選按鈕顯示/隱藏

$('input:radio[name="option"]').click(function() { 
    if ($(this).val() == "pop") { 
     $(this).parent().next('.wrapper').show(); 
    } else { 
     $(this).parent().next('.wrapper').hide(); 
    } 
}); 

<input name="option" type="radio"> 
<input name="option" type="radio" value="pop"> 

<div class="wrapper">text</div>

來源

2013-02-05 Jemes

請更新您的HTML顯示父，和另一組無線電和'級= 「包裝」'標籤。事實上，你在這裏所做的並不足以顯示你想要做的事情。 – BryanH

重複的http://stackoverflow.com/questions/2777139？ – BryanH

卸下parent()，作爲.wrapper元件是在相同的水平比輸入。

您也希望nextAll，而不是next，因爲next只選擇緊跟在後面的同分。

工作代碼：

$('input:radio[name="option"]').click(function() { 
    var $this = $(this); 
    if ($this.val() == "pop") { 
     $this.nextAll('.wrapper').show(); 
    } else { 
     $this.nextAll('.wrapper').hide(); 
    } 
});

Demonstration

如果只想先上後下.wrapper元素，那麼你可以使用這個：

$('input:radio[name="option"]').click(function() { 
    var $this = $(this), $wrapper = $this.nextAll('.wrapper').eq(0); 
    if ($this.val() == "pop") { 
     $wrapper.show(); 
    } else { 
     $wrapper.hide(); 
    } 
});

來源

2013-02-05 15:52:12

我需要父標籤，因爲我有這種形式在頁面上重複了幾次，我不希望所有的包裝類關閉。 – Jemes

@Jemes - 從您的問題中不清楚 – BryanH

@Jemes：請參閱編輯：您需要使用nextAll，而不是下一個。 –

你.parent().next('wrapper').無關抓鬥（沒有這樣的元素）。

這將工作

$('.wrapper').show();

來源

2013-02-05 15:55:36 BryanH

試試這個：

$(document).ready(function(){ 
    $("input[value='pop']").on("click", function() { 
     $(".wrapper").toggle(); 
    }); 
});

來源

2013-02-05 15:59:55 Mikee

jQuery單選按鈕顯示/隱藏

回答

相關問題