jquery - jQuery ラジオ ボタンの表示/非表示

Question

ラジオ ボタンを使用して div を表示および非表示にしようとしていますが、以下を機能させることができません。

    $('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>

Answer 1

要素が入力と同じレベルにあるため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();
    }
});

デモンストレーション

次の最初の.wrapper要素のみが必要な場合は、 this を使用できます。

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

Answer 2

これを試して：

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

Answer 3

.parent().next('wrapper').つかむものは何もありません（そのような要素はありません）。

これはうまくいきます

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