【jQuery】Googleタグマネージャ風ラジオボタンを作ってみる

今回はjQueryを使って、Googleタグマネージャの設定画面に出てくるラジオボタン的な動きするアレを作ってみる。

Googleタグマネージャのラジオボタン的なアレ

何かひとつ選んだら…↓

他の選択肢は消えて、選択したアイテムだけ残る。

こんな動きするやつを作ってみる。

サンプルページ

実際の動作は下記参照。
Googleタグマネージャ風ラジオボタン　サンプル

ソースコード解説

HTMLとCSSについては特に解説いらないと思うので、コメントなしソースだけ。
ラジオボタンとか言いながら、ラジオボタン使ってない。
マークアップ的にどうかとは思う人はラジオボタンで書き直してください。

HTML

:
<script type="text/javascript" src="./js/jquery.min.js"></script>
:
<form>
  <div class="gtradio" id="1">
    <p>1</p>
  </div>
  <div class="gtradio" id="2">
    <p>2</p>
  </div>
  <div class="gtradio" id="3">
    <p>3</p>
  </div>
  <input type="hidden" name="gtradio1" value="">
  <p id="change" style="display:none;">変更する</p>
</form>
:

CSS

.gtradio {
  display: inline-block;
  width: 120px;
  text-align: center;
  border: 1px solid #EEE;
  color: #666;
}

.gtradio:hover {
  cursor: pointer;
  border-color: #CCF;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

#change {
  color: #00F;
}

#change:hover {
  cursor: pointer;
}

Javascript(jQuery)

jQuery(function($) {
  // ラジオボタンクリック時
  $('.gtradio').click(function() {
    // クリックされたアイテムのIDを取得
    var selectID = $(this).attr("id");
    // クリックされたアイテム以外非表示
    $('.gtradio:not(#' + selectID + ')').hide();
    // inputタグの値変更
    $('input[name="gtradio1"]').val(selectID);
    // 変更ボタン表示
    $('#change').show();
  });

  // 変更ボタンクリック時
  $('#change').click(function() {
    // すべての非表示を表示する
    $('.gtradio').show();
    // 変更ボタン非表示
    $('#change').hide();
    // inputタグの値変更
    $('input[name="gtradio1"]').val('');
  });
});