jQueryでチェックボックスの親子を連動させる + 選択されているかのバリデーション

jQueryを使って、
1. 1つ以上選択されているかのバリデーションチェック。
2. 親のチェックに連動して、子全てが一括選択/解除される。
3. 子のチェックに連動して、親が選択/解除される。
をつくります。

1. チェックボックスが1つ以上選択されているかのバリデーション
2. 親のチェックに連動して、子全てが一括選択/解除される
3. 子のチェックに連動して、親が選択/解除される

jQuery関連記事

1. チェックボックスが1つ以上選択されているかのバリデーション

HTML

<ul>
  <li>
    <input type="checkbox" value="1" id="parent1" class="parent set_check student">
    <label for="parent1">指導対象</label>
  </li>
    <li>
      <input type="checkbox" value="1" id="child1" data-parent="parent1" class="child set_check student">
      <label for="child1">大学生</label>
    </li>
    <li>
      <input type="checkbox" value="1" id="child2" data-parent="parent1" class="child set_check student">
      <label for="child2">高校生</label>
    </li>
    <li>
      <input type="checkbox" value="1" id="child3" data-parent="parent1" class="child set_check student">
      <label for="child3">中学生</label>
    </li>
</ul>
<button id="require_check">確認</button>

親が「指導対象」、子が「大学生・高校生・中学生」です。
チェックしたいグループのすべてのチェックボックスに同じclassをつけます。上の例ではstudentです。

JavaScript(function)

function checkbox_check(classname, category) {
  var c = 0;
  $('.' + classname).each(function () {
    if ($(this).prop('checked')) { c++; }
  });
  if (c == 0) {
    $('#errorbox').append(category + "は一つ以上チェックしてください。<br>");
  }
}

functionの引数である、classnameにclass名を渡すことで、いろんな場所でチェックできるようになります。
全ての該当classを確認しに行って、選択されていればcをインクリメント。
最終的にcが0ならエラーを出します。

JavaScript(呼び出し側)

$('#require_check').click(function () {
  checkbox_check("student", "指導対象");
});

functionの引数である、classnameにstudentを、categoryにエラー時に表示する項目を渡して呼び出します。

2. 親のチェックに連動して、子全てが一括選択/解除される

JavaScript

$('.parent').click(function () {
  var now = $(this).prop('checked');
  var getid = $(this).attr('id');
  $('.child[data-parent="' + getid + '"]').each(function () {
    $(this).prop('checked', now);
  });
});

親がクリックされたら、親の選択状態をnowに格納します。
親のidと、子のdata-parentを同じにしてあるので、それらすべてをnowを使って同じにします。

3. 子のチェックに連動して、親が選択/解除される

JavaScript

$('.child').click(function () {
  var getid = $(this).data('parent');
  var c = 0;
  $('.child[data-parent="' + getid + '"]').each(function () {
    if ($(this).prop('checked') == true) {
      $("#" + getid).prop('checked', true);
    }
    if ($(this).data('parent') == getid && $(this).prop('checked') == true) {
      c++;
    }
    if (c == 0 && $("#" + getid).prop('checked') == true) {
      $("#" + getid).prop('checked', false);
    }
  });
});

今度は逆で、子がクリックされたら、子のdata-parentから親のidを取得し、子の選択状態に合わせて親も同じにしています。