フリーランス・個人事業主として独立を目指すデザイナー、副業を始めたいデザイナーを応援します! 自立支援に役立つ初心者向けWordPress情報も随時アップします!

jQueryでチェックボックスをグループごとに全選択・全解除する方法

読了目安時間は約 9 分です。

今回は、jQueryでチェックボックスを変更する方法をご紹介します。

「チェックボックス、全部チェック入れる・全部チェックを外す、特定のグループを全部チェック入れる・全部チェックを外す、という機能がほしい」というクライアント様のご要望があり、お応えしたときの自分なりの方法を備忘録的に記事にいたします。

結果はコチラ→

jQuery

var $ = jQuery;


$(document).ready(function () {


  //チェックを全部入れる
  $('input[name="check-all"]').on('click', function() {
    $('input[type="checkbox"]').attr('checked', true).prop('checked', true).change();
  });
  //チェックを全部外す
  $('input[name="uncheck-all"]').on('click', function(){
    $('input[type="checkbox"]').removeAttr('checked').prop('checked', false).change();
  });


  // カテゴリーAのチェックを全部入れる
  $('input[name="check-a"]').on('click', function() {
    $('input[name="category-a"]').attr('checked', true).prop('checked', true).change();
  });
  // カテゴリーAのチェックを全部外す
  $('input[name="uncheck-a"]').on('click', function(){
    $('input[name="category-a"]').removeAttr('checked').prop('checked', false).change();
  });


  //グループ1のチェックを全部入れる
  $('input[name="check-1"]').on('click', function() {
    $(".group1").attr('checked', true).prop('checked', true).change();
  });
  //グループ1のチェックを全部外す
  $('input[name="uncheck-1"]').on('click', function(){
    $(".group1").removeAttr('checked').prop('checked', false).change();
  });


  //グループ2のチェックを全部入れる
  $('input[name="check-2"]').on('click', function() {
    $(".group2").attr('checked', true).prop('checked', true).change();
  });
  //グループ2のチェックを全部外す
  $('input[name="uncheck-2"]').on('click', function(){
    $(".group2").removeAttr('checked').prop('checked', false).change();
  });


});

HTML

<form action="?" method="POST">
<p>
カテゴリーA<br>
第1グループ<br>
<label><input type="checkbox" name="category-a" class="group1" value="1"> チェックボックス1</label>
<label><input type="checkbox" name="category-a" class="group1" value="2"> チェックボックス2</label>
<br>
第2グループ<br>
<label><input type="checkbox" name="category-a" class="group2" value="3"> チェックボックス3</label> 
<label><input type="checkbox" name="category-a" class="group2" value="4"> チェックボックス4</label> 
<br>
<br>
カテゴリーB<br>
第1グループ<br>
<label><input type="checkbox" name="category-b" class="group1" value="1"> チェックボックス1</label>
<label><input type="checkbox" name="category-b" class="group1" value="2"> チェックボックス2</label>
<br>
第2グループ<br>
<label><input type="checkbox" name="category-b" class="group2" value="3"> チェックボックス3</label> 
<label><input type="checkbox" name="category-b" class="group2" value="4"> チェックボックス4</label> 
</p>
<br>
<p>
<input type="button" name="check-all" value="チェックを全部入れるボタン">
<input type="button" name="uncheck-all" value="チェックを全部外すボタン">
<br>
<input type="button" name="check-a" value="カテゴリーAのチェックを全部入れるボタン">
<input type="button" name="uncheck-a" value="カテゴリーAのチェックを全部外すボタン">
<br>
<input type="button" name="check-1" value="第1グループのチェックを全部入れるボタン">
<input type="button" name="uncheck-1" value="第1グループのチェックを全部外すボタン">
<br>
<input type="button" name="check-2" value="第2グループのチェックを全部入れるボタン">
<input type="button" name="uncheck-2" value="第2グループのチェックを全部外すボタン">
</p>


<p>
<input type="submit" value="送信">
</p>

結果はコチラ→

HTMLは、チェックボックスがチェックされるとchecked属性が付加されます。

.attr()を使うとchecked属性が付加されなかったりブラウザが反応しないことがあるので、.prop().change()も併用して使います。

.prop().attr()と同じようなものですが、バージョン1.6くらいからじゃないと使えません。古いバージョンを考慮しなければ.prop()だけでもいいと思います。

.prop()だけだとうまくいかないことがあるので、.change()で実行させます。

.attr()checked属性の追加&削除も行なうことで、トラブルを軽減できます。チェックを外す場合は.removeAttr('checked')

「間違ってるぞ」「もっといい方法あるぞ」という方はご教授ください!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる