checkbox全てにチェックを入れる – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
<style>

</style>

</head>
<body>
    <input type="checkbox" id="category_all" name="category_all">
    <label for="category_all">全て</label>
    <div id="categories">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="category">
      <label for="category_01">とんこつ</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="category">
      <label for="category_02">味噌</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="category">
      <label for="category_03">醤油</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="category">
      <label for="category_04">塩</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="category">
      <label for="category_05">その他</label>
    </div>

<script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
<script>
$(function(){
  $('#category_all').on('click', function(){
    $('.category').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#categories :checked').length == $('#categories: input').length){
      $('#cateogry_all').prop('checked', 'checked');
    } else {
        $('#category_all').prop('checked', false);
    }
  });
});
</script>
</body>
</html>

vue.jsではなく、jqueryでいけましたね。これを都道府県でやりたい。