- JavaScript
- 2022-09-21
この記事は最終更新日から1年以上経過しています。
jQueryでチェックボックスの全選択、及び全解除の仕組みを実装する方法をご紹介します。
jQueryを使いますので、jQueryの読み込みを忘れないようにしてください。
以下のようなHTMLがあったとします。
<input type="checkbox" name="all_check">全選択 <input type="checkbox" name="check[]" value="">a <input type="checkbox" name="check[]" value="">b <input type="checkbox" name="check[]" value="">c <input type="checkbox" name="check[]" value="">d <input type="checkbox" name="check[]" value="">e <input type="checkbox" name="check[]" value="">f
まずは全選択のチェックボックスにチェックを入れると全てのチェックボックスにチェックが入るようにしましょう。
$('input[name="all_check"]').on('click',function() { $('input[name="check[]"]').prop('checked', this.checked); });
次に、各チェックボックスのクリックイベントを設定し、チェックの状況によって全選択のチェック状態を変更するように仕組みます。
チェックボックスの数とチェックされたチェックボックスの数を比較して、同じであれば(全てチェックされていれば)全選択にもチェックを入れます。
どれか1つでもチェックが外れれば全選択のチェックは解除します。
$('input[name="check[]"]').on('click',function(){ if($('input[name="check[]"]:checked').length == $('input[name="check[]"]').length ) { $('input[name="all_check"]').prop('checked', true); } else { $('input[name="all_check"]').prop('checked', false); } });
if文を使わずに1行で書くこともできます。
$('input[name="check[]"]').on('click',function(){ $('input[name="all_check"]').prop('checked', ($('input[name="check[]"]:checked').length == $('input[name="check[]"]').length)); });
1,511 views