【jQuery】ラジオボタンの選択でフォーム項目の表示・非表示を切り替える

こんにちは、Ryohei（@ityryohei）です！

ある日のこと。

フォーム項目は少ない方がコンバージョン（成果）が上がりますよ！

打ち合わせ中にSEO業者の方が言いました。

確かに、フォームの項目に入力していくのは大変です。少なくて済むならその方が良いです。私自身、フォーム項目が多すぎて途中で離脱した経験がありますので...。

なので、今回はフォーム項目を最低限必要なものにするために、ラジオボタンの選択によって項目の表示・非表示を切り替える方法をご紹介したいと思います！

フォーム項目の切り替えの流れ

フォーム項目の表示・非表示の切り替えは選択されたラジオボタンの値によって判定します。もちろんセレクトボックスやボタン、チェックボックスでも問題ありません。これが選択されたらこれを表示しよう、ということだけ決めておけば大丈夫です。

フォーム項目の切り替えは下記のような流れになるのかなと思います。

3番目のdisabledについては、フォームの入力欄に値を入れた後にラジオボタンが選択された場合の対応となります。disabledを付加することでその項目の値がsubmitされないようになります。

フォームを設置する

下記はフォームのサンプルになります。classにswitchItemsを持っている要素が表示・非表示を切り替える項目となります。

<form method="post" action="#">
  <table>
    <tbody>
      <tr>
        <th>お問い合わせ種類</th>
        <td>
          <label><input name="type" type="radio" value="1">type1</label>
          <label><input name="type" type="radio" value="2">type2</label>
        </td>
      </tr>
      <tr>
        <th>名前</th>
        <td><input name="name" type="text" value=""></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><input name="email" type="email" value=""></td>
      </tr>
      <tr class="switchItems">
        <th>電話番号</th>
        <td><input name="tel" type="tel" value=""></td>
      </tr>
      <tr>
        <th>お問い合わせ内容</th>
        <td><textarea name="content"></textarea></td>
      </tr>
      <tr class="switchItems">
        <th>その他</th>
        <td><textarea name="other"></textarea></td>
      </tr>
    </tbody>
  </table>
</form>

スクリプトを追加する

スクリプトはラジオボタンの値が変わった場合に値を取得し、値によってswitcuItemsの表示・非表示を切り替えています。また、inputFieldで指定した要素に対してdisabledを付加しています。

$(function(){

  var switchBtn = $('input[name=type]');
  var switchItems = $('.switchItems');
  var inputField = 'input, textarea';

  switchBtn.on('change', function(){
  
    var inputValue = $(this).val();

    if(inputValue === '2'){
      switchItems.hide();
      switchItems.find(inputField).each(function(){
        $(this).prop('disabled', true);
      });
    }else{
      switchItems.show();
      switchItems.find(inputField).each(function(){
        $(this).prop('disabled', false);
      });
    }
  });
});

上記ではページをロード後にラジオボタンを選択していますが、ロード時にラジオボタンが選択状態であることが想定される場合は下記を追加すると良い感じになります！

$(function(){

  var switchItems = $('.switchItems');
  var inputField = 'input, textarea';
  var inputValue = $('input[name=type]:checked').val();

  if(inputValue === '2'){
    switchItems.hide();
    switchItems.find(inputField).each(function(){
      $(this).prop('disabled', true);
    });
  }else{
    switchItems.show();
    switchItems.find(inputField).each(function(){
      $(this).prop('disabled', false);
    });
  }
});

フォーム項目の表示・非表示を切り替えるデモ

最後に、本記事の内容で作ったデモになります。下記のデモではラジオボタンは選択済みの状態にしています。

以上、ラジオボタンの選択でフォーム項目の表示・非表示を切り替える方法のご紹介でした！