複数のチェックボックスから、最後に選択されたテキストだけを表示したいです

Question

こんにちは。

＊＊＊実現したいこと＊＊＊
複数選択可能なチェックボックスから、最後に選択されたテキストだけを表示させて、それより前に選択されたのは非表示にさせたいです。
もし選択が解除された場合も常に最後に選択されたものを表示させたいです。
例）
1回目は”USA”を選択 => ”USA”と表示
2回目は”JAPAN”を選択 => ”JAPAN"と表示
3回目は”CHINA”を選択 => ”CHINA"と表示

もし”JAPAN”の選択解除 => ”CHINA"と表示
もし”CHINA”の選択解除 => ”JAPAN"と表示

＊＊＊現在の状況＊＊＊
セレクトボックスをカスタマイズできるselect2（select2）を使用していて、複数選択可能な状態です。複数選択した場合、defaultで全てのテキストが表示されている状態です（スクリーンショット）

ちなみに各要素にはdata属性があり、選択されていく度に数字は大きくなっていきます。
1回目に取得された要素の吐き出し(data-select2-id="29")
2回目に取得された要素の吐き出し(data-select2-id="30")
3回目に取得された要素の吐き出し(data-select2-id="31")
それを利用して、最後に選択されたテキストを取得してそれだけを表示させたいです。

または選択される度に、選択されたテキストを取得し配列に格納して、配列内の最後の要素を取得して表示させる方がコードは短く書けますでしょうか？

初心者ですので、知識不足やアプローチの仕方に欠けてる点がありますのでご指摘やご教授頂けますと幸いです。

Comments

[yambejp]

チェックボックスとテキストがどう関係しているのかわかりません

Answer 1

• 空のリストを用意しておく (配列か Set が適当でしょう)
• 対象のチェックボックスの change イベントを監視して、チェックされたらリストの最後に追加して、対応するテキストを表示する。チェックが外れたら、リストから削除して、リスト内の最後のチェックボックに対応するテキストを表示する

Answer 2

命題が曖昧なので最後にチェックしたもの以外disabledにする方法

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const g=[...document.querySelectorAll('.group')];
  const ch=[];
  g.forEach(x=>{
    x.addEventListener('change',e=>{
      const num=g.indexOf(e.target);
      e.target.checked?ch.push(num):ch.pop();
      g.forEach(x=>{
        x.disabled=(x.checked && g.indexOf(x)!==ch.slice(-1)[0]);
      });
    });
  });
});
</script>
<input type="checkbox" class="group">
<input type="checkbox" class="group">
<input type="checkbox" class="group">
<input type="checkbox" class="group">
<input type="checkbox" class="group">