ラジオボタンの選択肢によって、要素を表示したい。

Question

<label class="radio-inline">
<input type="radio" name="first" value="msg">hoge
<textarea id="msg" style="display:none" name="msg"><?php echo $msg ?></textarea>
</label>
<label class="radio-inline">
<input type="radio" name="first" value="redirect">hogehoge
<input id="redirect" style="display:none" type="text" name="redirect">
</label>

このような上記HTMLコードがありまして、ラジオボタンのチェックの状態によって
"display:none"となっているところを表示したいと考えております。

jquery(function () {
    if (jquery('input[name=first]:checked').val() === 'msg') {
        jquery('textarea[name=msg]').show();
    }
});

このようなjQueryを書いてみたのですがうまく動作いたしません。
ラジオボタンが何も選択されてない状況では何も表示されなくていいのですが
どのようなjQueryを書いたら良いのでしょうか。

jQuery, javascriptは今回初めて触れます。
暑苦しいですがよろしくお願い致します。

Answer 1

http://jsdo.it/katoy/4x6yに作ってみました。

$('input[type=radio]').change(function() {
    var selected = $('input[name=first]:checked').val();
    $('.input_x').hide();
    $("#" + selected).show();
});

<div>
  <input type="radio" name="first" value="msg"><label class="radio-inline">msg</label>
  <input type="radio" name="first" value="redirect"><label class="radio-inline">redirect</label>
</div>

<div>
  <textarea id="msg" style="display:none" name="msg" class="input_x">XXX</textarea>
  <input id="redirect" style="display:none" type="text" name="redirect" class="input_x"
    placeholder="redirect">
</div>

Answer 2

単純に書き換えると、

$('input[type=radio]').change(function() {

    if($('input[name=first]:checked').val() === 'msg') {
        $('textarea[name=msg]').show();
    }

});

という感じでしょうか。

元々のソースだと、scriptが読み込まれた時に全て実行されていますので、読み込まれた瞬間に動作が終了しています。radioをチェックしたら、という動作にする必要があるということです。

あと、「暑苦しい」じゃなくて、「厚かましい」ですかね？(笑)
お互い早く寝た方が良さそうですね。。。

Comments

[rera]

ご連絡が遅くなり申し訳ありません！

ありがとうございます！
そうですね...この時はもうぼーっとしていましたｗ