チェックボックスの全選択・解除をしたい

やりたいこと

画像のように、都道府県をチェックボックスで選択するページを作成したいです。

①全エリア、または全選択のチェックボックスをクリックすると、全ての都道府県にチェックが入る（全エリアボタンも、全選択チェックボックスも、挙動は同じ）
②関東、関西などのエリアボタンを押すと、そのエリアの都道府県だけが全選択・解除される
③一つでも都道府県が選択されていない場合は、全選択のチェックを解除したい

##解決したいこと

やりたかった機能自体はつけられたのですが、
全選択チェック後、オレンジ色のエリアボタンをクリックしても、ワンクリックで反応しなくなってしまいました。
全選択チェックは解除されますが、都道府県は全て選択された状態のままになってしまいます。
（もう1度オレンジのエリアボタンをクリックすると、エリア全てのチェックがなくなります。）

これを1度クリックしただけで全選択チェック解除と、該当エリアの都道府県解除ができるようにしたいです。

https://codepen.io/mnmds/pen/LYRrOzm

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, user-scalable=no">
6    <meta name="format-detection" content="telephone=no">
7    <title>テスト</title>
8    <meta name="description" content="">
9    <link href="style.css" rel="stylesheet" type="text/css">
10    <script src="./js/jquery.min.js"></script>
11    <script src="./js/test.js"></script>
12  </head>
13  <body>
14    <main class="wrapper">
15
16        <div class="check__boxes">
17          <label class="topArea__prefecture"><input type="checkbox" id="all" value="全選択">全選択</label>
18        </div>
19
20        <section id="check_itemArea" class="flex">
21            <div class="flexContainer">
22              <label class="btnArea" for="all_kanto"><input type="checkbox" name="allChecked" id="all_kanto">関東エリア</label>
23              <div class="check__boxes" id="check_kanto">
24                <label class="checkItem"><input type="checkbox" name="kanto" class="list" value="東京都">東京都</label>
25                <label class="checkItem"><input type="checkbox" name="kanto" class="list" value="埼玉県">埼玉県</label>
26                <label class="checkItem"><input type="checkbox" name="kanto" class="list" value="千葉県">千葉県</label>
27                <label class="checkItem"><input type="checkbox" name="kanto" class="list" value="神奈川県">神奈川県</label>
28              </div>
29            </div>
30            <div class="flexContainer">
31              <label class="btnArea" for="all_chubu"><input type="checkbox" name="allChecked" id="all_chubu">中部エリア</label>
32              <div class="check__boxes" id="check_chubu">
33                <label class="checkItem"><input type="checkbox" name="chubu" class="list" value="愛知県">愛知県</label>
34                <label class="checkItem"><input type="checkbox" name="chubu" class="list" value="岐阜県">岐阜県</label>
35                <label class="checkItem"><input type="checkbox" name="chubu" class="list" value="三重県">三重県</label>
36                <label class="checkItem"><input type="checkbox" name="chubu" class="list" value="静岡県">静岡県</label>
37              </div>
38            </div>
39
40            <div class="flexContainer">
41            <label class="btnArea" for="all_kansai"><input type="checkbox" name="allChecked" id="all_kansai">関西エリア</label>
42              <div class="check__boxes" id="check_kansai">
43                <label class="checkItem"><input type="checkbox" name="kansai" class="list" value="大阪府">大阪府</label>
44                <label class="checkItem"><input type="checkbox" name="kansai" class="list" value="京都府">京都府</label>
45                <label class="checkItem"><input type="checkbox" name="kansai" class="list" value="兵庫県">兵庫県</label>
46              </div>
47            </div>
48          </section>
49    </main>
50  </body>
51</html>
52

//全選択
$(function() {
  $('#all').on("click",function(){
    $('.list').prop("checked", $(this).prop("checked"));
  });
  $(".list").on('click', function() {
    if ($('#check_itemArea :checked').length == $('#check_itemArea :input').length) {
      $('#all').prop('checked', true);
    } else {
      $('#all').prop('checked', false);
    }
  });
  $("#all_kanto").on('click', function() {
    if ($('#check_itemArea :checked').length == $('#check_itemArea :input').length) {
      $('#all').prop('checked', true);
    } else {
      $('#all').prop('checked', false);
    }
  });
  $("#all_chubu").on('click', function() {
    if ($('#check_itemArea :checked').length == $('#check_itemArea :input').length) {
      $('#all').prop('checked', true);
    } else {
      $('#all').prop('checked', false);
    }
  });
  $("#all_kansai").on('click', function() {
    if ($('#check_itemArea :checked').length == $('#check_itemArea :input').length) {
      $('#all').prop('checked', true);
    } else {
      $('#all').prop('checked', false);
    }
  });
});

// 関東エリア
$(function() {
  $('#all_kanto').on('click', function() {
    $("input[name='kanto']").prop('checked', this.checked);
  });
  $("input[name='kanto']").on('click', function() {
    if ($('#check_kanto :checked').length == $('#check_kanto :input').length) {
      $('#all_kanto').prop('checked', true);
    } else {
      $('#all_kanto').prop('checked', false);
    }
  });
});
// 中部エリア
$(function() {
  $('#all_chubu').on('click', function() {
    $("input[name='chubu']").prop('checked', this.checked);
  });
  $("input[name='chubu']").on('click', function() {
    if ($('#boxes_chubu :checked').length == $('#check_chubu :input').length) {
      $('#all_chubu').prop('checked', true);
    } else {
      $('#all_chubu').prop('checked', false);
    }
  });
});
// 近畿エリア
$(function() {
  $('#all_kansai').on('click', function() {
    $("input[name='kansai']").prop('checked', this.checked);
  });
  $("input[name='kansai']").on('click', function() {
    if ($('#boxes_kansai :checked').length == $('#check_kansai :input').length) {
      $('#all_kansai').prop('checked', true);
    } else {
      $('#all_kansai').prop('checked', false);
    }
  });
});

css
1@charset "utf-8";
2
3.wrapper {
4  width: 970px;
5}
6.flex {
7  display: flex;
8}
9.flexContainer {
10  width: 180px;
11}
12.flexContainer .btnArea {
13  background: orange;
14  width: 150px;
15}
16.btnArea {
17  cursor: pointer;
18  display: block;
19  font-weight: bold;
20  margin-bottom: 10px;
21  user-select: none;
22}
23.topArea__btn--employee {
24  align-items: center;
25  color: #000;
26  display: flex;
27  padding: 0;
28  width: 110px;
29}
30.check__boxes {
31  margin-bottom: 20px;
32}
33.check__boxes .checkItem {
34  display: block;
35  margin-right: 20px;
36  user-select: none;
37}
38.check__boxes .checkItem input[type=checkbox] {
39  margin: -4px 7px 0 3px;
40}

ご教授いただければ幸いです。よろしくお願いいたします。

yambejp

2021/01/07 07:07

UIが中途半端ですね全エリアの全選択・解除がチェックボックスなら各エリアもエリアごとの全選択・解除チェックボックスがないと違和感があります（逆に全エリアのチェックボックスをやめてもいい）

yambejp

2021/01/07 07:24

よくみたらチェックボックスはあるのですね・・・調整します

pondering

2021/01/07 07:37 編集

コメントありがとうございます。最終的には全選択はボタンのみかチェックボックスのみにするつもりだったのですが何故か現段階で欲張って２つも入れてました。全選択チェックボックスのみで各エリアにもボタンではなく全選択・解除チェックボックスに変更してみます！（codepenのみ変更完了しました。）そして、チェックボックスに見た目を変更したら、１度で変更できたりできなかった原因はエリアボタンの部分にチェックが入っているかどうかだということは分かりました…。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1$(function(){
2  $('#all').on('change',function(){
3    $('[name=allChecked]').prop('checked',$(this).prop('checked')).trigger('change');
4  });
5  $('[name=allChecked]').on('change',function(){
6    $(this).closest('.flexContainer').find('.list').prop('checked',$(this).prop('checked'));
7  });
8});

投稿2021/01/07 07:32

yambejp

総合スコア116661

yambejp

2021/01/07 07:39

挙動あってますか？ HTMLがちゃんと組まれているので、この程度のソースで十分機能するとおもいますよ

pondering

2021/01/07 09:09

ありがとうございます。該当エリアの都道府県解除ができました。また、触っていて気づいたのですが・エリアの都道府県全てに手動でもチェックが入った場合は、該当エリアの全選択にチェックが入るようにしたい（現在、関東だけそのような動きになっている）・都道府県のチェックが、手動や、エリアボタン選択によって全部選択された場合には、全選択に自動的にチェックが入るようにしたいのですが、この場合についても教えていただけませんでしょうか。 https://codepen.io/mnmds/pen/LYRrOzm 何卒よろしくお願いいたします。

yambejp

2021/01/07 10:03

逆はどうしますか？手動で全部チェックがはずれたらエリアのチェックが外れるようにする？エリアのチェックが全部はずれたらallのチェックが外れるようにする？

yambejp

2021/01/07 10:33

一応こんな感じでどうでしょう？ $(function(){ $('#all').on('change',function(){ $('[name=allChecked]').prop('checked',$(this).prop('checked')).trigger('change'); }); $('[name=allChecked]').on('change',function(){ $(this).closest('.flexContainer').find('.list').prop('checked',$(this).prop('checked')); var node=$(this).closest('.wrapper').find('[name=allChecked]'); if(node.filter(':not(:checked)').length==0 || node.filter(':checked').length==0){ $('#all').prop('checked',node.prop('checked')); } }); $('.list').on('change',function(){ var node=$(this).closest('.check__boxes').find('.list'); if(node.filter(':not(:checked)').length==0 || node.filter(':checked').length==0){ $(this).closest('.flexContainer').find('[name=allChecked]').prop('checked',node.prop('checked')).trigger('change'); } }); });

pondering

2021/01/08 00:53

遅くなってしまい申し訳ございません。 >手動で1つでもチェックが外れたら、エリアのチェックは外れ、エリアのチェックが1つでもはずれたらallのチェックが外れるようにする　考えでした。 https://codepen.io/mnmds/pen/LYRrOzm 記載いただいた内容を入れたところ、やりたいと思った動作になりました。自分の力で回答にたどり着けるように、はもちろんなのですが文章でどんな挙動なのか書けるようにならなくてはな…と思いました。 UI含め、ご指摘・ご回答をいただき本当にありがとうございました。

yambejp

2021/01/08 01:31

あーなるほど、そっちの方ですねそうなるとこんな感じですかね？ $(function(){ $('#all').on('change',function(){ $('[name=allChecked]').prop('checked',$(this).prop('checked')).trigger('change'); }); $('[name=allChecked]').on('change',function(){ $(this).closest('.flexContainer').find('.list').prop('checked',$(this).prop('checked')); $('#all').prop('checked',$('[name=allChecked]:not(:checked)').length==0); }); $('.list').on('change',function(){ var flg=$(this).closest('.check__boxes').find('.list:not(:checked)').length==0; $(this).closest('.flexContainer').find('[name=allChecked]').prop('checked',flg); $('#all').prop('checked',$('.list:not(:checked)').length==0); }); });

pondering

2021/01/08 05:51 編集

ありがとうございます。上記ですと、下の方で自分でごちゃごちゃ記載していたところを消すことで実現できました！

yambejp

2021/01/08 05:53

別に責めるつもりは全然ないですけど・・・問題が解決する前にベストアンサー選んでしまうとその後の追加質問を見落としてしまうことがあるので解決してないならBAにしないほうがいいと思いますよ・・

pondering

2021/01/08 06:08 編集

ご指摘くださりありがとうございます。おっしゃる通りです…本当にすみません。今後気をつけるようにいたします！

行動規範の内容に同意します