1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ラジオボタン切り替えでタブのように表示を切り替えるjs

Last updated at Posted at 2024-10-31
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>花火アニメーション</title>
    <style>
      .display_none {
        display: none;
      }
    </style>
  </head>
  <body>
    <p>
      以下のコードでjs-toggle-displayを取得し(複数あっても対応できるように)、
      js-toggle-display-radioのラジオボタンのcheckedがある要素のdata-displayのクラスを持つもののdisplay_noneクラスを削除し、
      checkedがない場合はdisplay_noneクラスはついたままにしてクリックするたびに表示がかわるようにjqueryで書いてほしい
    </p>
    <div class="js-toggle-display">
      <div class="js-toggle-display-radio">
        <label tabindex="0"
          ><input
            type="radio"
            name="radio"
            data-display="js-toggle-display1"
            checked
          />
          <span>合計</span>
        </label>
        <label tabindex="0"
          ><input type="radio" name="radio" data-display="js-toggle-display2" />
          <span>月別</span>
        </label>
      </div>

      <div class="js-toggle-display1">合計エリア</div>
      <div class="js-toggle-display2">月別エリア</div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 全ての .js-toggle-display を取得してループ処理
        document.querySelectorAll(".js-toggle-display").forEach((container) => {
          // 初期化:checkedのdata-displayに対応するエリアを表示
          updateDisplay(container);

          // ラジオボタンのクリックイベント設定
          container
            .querySelectorAll('.js-toggle-display-radio input[type="radio"]')
            .forEach((radio) => {
              radio.addEventListener("change", () => updateDisplay(container));
            });
        });

        // 表示を更新する関数
        function updateDisplay(container) {
          // 全ての表示エリアを非表示にするが、.js-toggle-display-radioは対象外
          container
            .querySelectorAll(".js-toggle-display1, .js-toggle-display2")
            .forEach((element) => {
              element.classList.add("display_none");
            });

          // チェックされているinputのdata-display属性に対応するエリアのdisplay_noneクラスを削除
          const checkedInput = container.querySelector(
            '.js-toggle-display-radio input[type="radio"]:checked'
          );
          if (checkedInput) {
            const displayClass = checkedInput.getAttribute("data-display");
            const displayElement = container.querySelector(`.${displayClass}`);
            if (displayElement) {
              displayElement.classList.remove("display_none");
            }
          }
        }
      });
    </script>
  </body>
</html>

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?