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

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

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

Googleタグマネージャ画面サンプル01

何かひとつ選んだら…↓

Googleタグマネージャ画面サンプル02

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

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

サンプルページ

実際の動作は下記参照。
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('');
  });
});

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です