📂プログラミング

JavaScript でシフトクリックによる連続したチェックボックスの選択、解除、反転の例

ショーケース

上のチェックボックスのいずれかを選択した状態でShiftキーを押しながら別のチェックボックスをクリックすると、2つのチェックボックスの間にあるすべてのチェックボックスが選択または解除される。この機能は多数のチェックボックスを扱うときに便利で、特に投稿一覧やファイル一覧のように一見チェックボックスに見えない場合にも役立つ。

コード

HTML

<div align="center" style="user-select: none;">

<input type="checkbox" id="A"><label for="A">A</label>
<input type="checkbox" id="B"><label for="B">B</label>
<input type="checkbox" id="C"><label for="C">C</label>
<input type="checkbox" id="D"><label for="D">D</label>
<input type="checkbox" id="E"><label for="E">E</label>
<input type="checkbox" id="F"><label for="F">F</label>
<input type="checkbox" id="G"><label for="G">G</label>
<input type="checkbox" id="H"><label for="H">H</label>
<input type="checkbox" id="I"><label for="I">I</label>
<input type="checkbox" id="J"><label for="J">J</label>

</div>

JavaScript

<script>
let firstChecked = null;
let secondChecked = null;

document.querySelectorAll("input[type='checkbox']").forEach((checkbox) => {
  checkbox.addEventListener("click", function (event) {
    if (!firstChecked) {
      firstChecked = event.target;
      console.log("첫 번째 클릭:", firstChecked.id);
    } else if (event.shiftKey) {
      secondChecked = event.target;
      console.log("두 번째 클릭:", secondChecked.id);

      let checkboxes = document.querySelectorAll("input[type='checkbox']");
      let start = [...checkboxes].indexOf(firstChecked);
      let end = [...checkboxes].indexOf(secondChecked);

      checkboxes.forEach((cb, index) => {
        if (index > Math.min(start, end) && index < Math.max(start, end)) {
          cb.checked = !cb.checked;
        }
      });

      setTimeout(() => {
        firstChecked = null;
        secondChecked = null;
      }, 100);
    } else {
      firstChecked = event.target;
      secondChecked = null;
    }
  });
});
</script>