チェックボックスを数えて内容が違う場合にはツールチップを出す

Last updated at 2024-05-18Posted at 2024-05-18
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rotate and Center with Proportional Div2</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
      .disabled {
        opacity: 0.5;
        pointer-events: none;
      }

      .tooltip {
        display: none;
      }
      .tooltip_wrap:hover .tooltip {
        display: inline-flex;
        background: #333;
        color: #fff;
        padding: 5px;
        border-radius: 5px;
        font-size: 12px;
      }
      .tooltip-visible {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="selectbutton">
      <button class="selectall disabled">all</button>
      <button class="ikkatsu disabled">ikkatsu</button>
    </div>
    
    <div class="checkList">
      <input type="checkbox" class="selects" />
      <label for="selects">check1</label>
      <span class="product">pc</span>
    </div>
    <div class="checkList">
      <input type="checkbox" class="selects" />
      <label for="selects">check2</label>
      <span class="product">pc</span>
    </div>
    <div class="checkList">
      <input type="checkbox" class="selects" />
      <label for="selects">check3</label>
      <span class="product">tablet</span>
    </div>

    <script>
      $(document).ready(function() {
        $('.selects').on('change', function() {
          const checkedCheckboxes = $('.selects:checked');
          const checkedCount = checkedCheckboxes.length;

          // 更新 selectall ボタンの状態
          if (checkedCount > 0) {
            $('.selectall').removeClass('disabled');
          } else {
            $('.selectall').addClass('disabled');
          }

          // すべてのチェックされた product クラスの値を取得
          const products = checkedCheckboxes.closest('.checkList').find('.product').map(function() {
            return $(this).text();
          }).get();

          // すべての product クラスの値が同じかどうかを確認
          const allSameProduct = products.length > 0 && products.every(val => val === products[0]);

          // 更新 ikkatsu ボタンの状態
          if (allSameProduct && checkedCount > 0) {
            $('.ikkatsu').removeClass('disabled');
            $('.ikkatsu').parent('a').contents().unwrap(); // aタグとspanを削除
            $('.ikkatsu').siblings('span').remove(); // 既存のspanを削除
          } else {
            if (!$('.ikkatsu').hasClass('disabled')) {
              $('.ikkatsu').addClass('disabled');
              // aタグで囲み、spanを追加
              $('.ikkatsu').wrap('<a class="tooltip_wrap"></a>').after('<span class="tooltip">ここにツールチップが入ります</span>');
            }
          }
        });
      });
    </script>
  </body>
</html>
You get articles that match your needs
You can efficiently read back useful information
You can use dark theme
What you can do with signing up