jQueryでタグの表示/非表示切り替えを行う

なぜか苦戦して悔しかったので晒してみる。

<input type="radio" id="yRadio" value="0">表示</input>
<input type="radio" id="yRadio" value="1">非表示</input>

<div id="yDiv">非表示させたい！</div>

divタグの表示、非表示の切り替えを
ラジオボタンの選択で行うという動きをjQueryでやろうとしたのです。

jQuery1

// イベント発火
$('input[id=yRadio]').change( function(){
    if ($('input[id=yRadio]:checked').val() == 1) {
        // 表示させないから…と思ってまず書いたのはこちら
        $('yDiv').remove();
    }
});

divタグの削除はできたけど、また表示させるにはどうすればいいんだ？
というところで手詰まり状態に。

add関数でタグ追加？？
もしかしてページ自体リロードした方がいいの？？
とか色々考えたんですが、結局こうなりました。

jQuery2

// イベント発火
$('input[id=yRadio]').change( function(){
    if ($('input[id=yRadio]:checked').val() == 0) {
        // 表示
        $('yDiv').toggle(true);
    }
    else {
        // 非表示
        $('yDiv').toggle(false);
    }
});

しかも今リファレンスを見直したら、
toggleは「表示状態にあるものを非表示にし、非表示状態にあるものは表示状態に」するので
こう書くのが正解かもしれないです。

jQuery3

$('input[id=yRadio]').change( function(){
    // 表示・非表示切り替え
    $('yDiv').toggle();
});

ちゃんと調べろよって話ですが…。
jQueryって便利ですね…。