全てにチェックを入れるチェックボックスの作り方【JavaScript】

メモ

<div class="checks-all">
    <label for="checksAll">
        <div>
            <input type="checkbox" id="checksAll">
        </div>
    </label>
    全て選択
</div>

<label for="1">
    <div>
        <input type="checkbox" name="team[]" id="1" value="1">
    </div>
</label>

<label for="2">
    <div>
        <input type="checkbox" name="team[]" id="2" value="2">
    </div>
</label>

<label for="3">
    <div>
        <input type="checkbox" name="team[]" id="3" value="3">
    </div>
</label>

下記JavaScript

const checkall = document.getElementById("checksAll");
const teamChecks = document.querySelectorAll('input[name="team[]"]');

function updateCheckAllStatus() {
    const allChecked = Array.from(teamChecks).every(checkbox => checkbox.checked);
    checkall.checked = allChecked;
}

// ページ読み込み時にチェック状態を更新
document.addEventListener('DOMContentLoaded', updateCheckAllStatus);

// 全て選択のチェックボックスがクリックされた時
checkall.addEventListener('click', () => {
    for (val of teamChecks) {
        val.checked = checkall.checked;
    }
});

// 個別のチェックボックスがクリックされた時
teamChecks.forEach(element => {
    element.addEventListener('click', () => {
        if (!element.checked) {
            checkall.checked = false;
        } else {
            updateCheckAllStatus();
        }
    });
});