【jQuery】読み込み時に特定クラスのチェックボックスを判定し、チェックを入れる方法

今日は、ウェブページの読み込み時にjQueryを使って特定のクラスを持つチェックボックスが全て選択されているかを判定し、その結果に基づいて他のチェックボックスにチェックを入れる方法をご紹介します。実際に使用する機会は限られるかもしれませんが、特定の条件下で複数の要素を一括操作する際に便利なテクニックとなります。

HTML

まず、基本となるHTMLの構造を考えます。

<!-- 指定したクラスのチェックボックス -->
<input type="checkbox" class="check-target" />
<input type="checkbox" class="check-target" />
<input type="checkbox" class="check-target" />

<!-- 他のチェックボックス -->
<input type="checkbox" class="other-checkbox" />
<input type="checkbox" class="other-checkbox" />

上記のサンプルでは、check-targetというクラスが付与されたチェックボックスと、other-checkboxというクラスが付与されたチェックボックスを設置しています。

jQuery

次に、ページ読み込み時にcheck-targetクラスのチェックボックスが全て選択されているかを判定し、その場合にother-checkboxクラスのチェックボックスにチェックを入れるjQueryのコードを実装します。

$(document).ready(function() {
    // 'check-target'クラスを持つチェックボックスの総数を取得
    var totalTarget = $('.check-target').length;

    // 'check-target'クラスを持ち、かつチェックされているチェックボックスの総数を取得
    var checkedTarget = $('.check-target:checked').length;

    // 全てチェックされているかどうかを確認
    if (totalTarget === checkedTarget) {
        // 'other-checkbox'クラスを持つチェックボックスにチェックを入れる
        $('.other-checkbox').prop('checked', true);
    }
});

まず、$(‘.check-target’).lengthでcheck-targetクラスを持つチェックボックスの総数を取得します。

次に、$(‘.check-target:checked’).lengthでcheck-targetクラスを持ちながらもチェックされているチェックボックスの数を取得します。

これらの数を比較して、もしcheck-targetクラスを持つチェックボックスが全てチェックされていれば、other-checkboxクラスのチェックボックスにチェックを入れます。

まとめ

このテクニックは、例えば全ての項目を確認した後、最終的な確認ボックスを自動的にチェックするといった場面など、ユーザーエクスペリエンスを向上させるために役立ちます。jQueryを使った便利な操作の一例として、ぜひともお試しください。