【jQuery】ラジオボタンのvalue値を取得して開閉するアコーディオンを実装

こんにちは。E-kan株式会社エンジニアの前中です。
今回は弊社のエンジニア岡田の記事を紹介します。

こんにちは。E-kan株式会社の岡田です。

先日、ラジオボタンのvalue値を取得して開閉するアコーディオンを実装したので備忘録。

やりたいこと

• すでにあるラジオボタンに項目「ラジオボタン03」を追加したい
• 「ラジオボタン03」を選択した場合はテキスト入力欄を表示したい
• テキスト入力欄は「ラジオボタン03」選択時のみ表示するようにしたい

↓出来上がったもの。必要な部分のみを書き出すと、こんな感じです。

<ul>
  <li>
    <label>
      ラジオボタン01<input type="radio" name="radioButton" value="0">
    </label>
  </li>
  <li>
    <label>
      ラジオボタン02<input type="radio" name="radioButton" value="1">
    </label>
  </li>
  <li>
    <label>
      ラジオボタン03<input type="radio" name="radioButton" value="2">
    </label>
    <div class="textBox">
      <label>
        <input type="text" placeholder="テキスト入力欄">
      </label>
    </div>
  </li>
</ul>

jQuery

$(function(){
  //テキスト入力欄を非表示にしておく
  $('.textBox').hide();

  //input の　name="radioButton"　が、change　したら
  $( 'input[name="radioButton"]:radio' ).change( function() {
    var radioval = $(this).val(); //選択されている"value"を取得する
    if(radioval == 2){ //"value"が"2"なら
      $('.textBox').show(); //テキスト入力欄を表示
    } else { //"value"が"2"以外なら
      $('.textBox').hide(); //テキスト入力欄を非表示
    }
  });
});

作業対象のページ内に同じような仕組みが存在するからすぐに実装出来ますよねって工数0.5hで振られた作業でしたが、実際のページを見てみたらラジオボタンじゃなくてチェックボックスだったため「え、じゃあラジオボタンは？」ってなって急ぎ作ったもの。

基本、コピー＆ペーストで人生を乗り切って行きたいので、作ったものは忘れないうちにメモしていきます。

いかがでしたか。
jQueryはcssセレクタと共通の記述ができるのが魅力ですね。