《JQuery》同じクラス名の親を持つすべてのチェックボックスにチェックをいれる

こんにちは！RABIMAX管理人、らびです！
今日は同じクラス名の親を持つチェックボックスを連動させる方法をご紹介します。
サンプルコードは下記です。

サンプルコード

<ul class="chk">
    <li><input type="checkbox" value="1" class="chk1" id="chk1-1"><label for="chk1-1">check1</label></li>
    <li><input type="checkbox" value="2" class="chk2" id="chk1-2"><label for="chk1-2">check2</label></li>
    <li><input type="checkbox" value="3" class="chk3" id="chk1-3"><label for="chk1-3">check3</label></li>
</ul>

<ul class="chk">
    <li><input type="checkbox" value="1" class="chk1" id="chk2-1"><label for="chk2-1">check1</label></li>
    <li><input type="checkbox" value="2" class="chk2" id="chk2-2"><label for="chk2-2">check2</label></li>
    <li><input type="checkbox" value="3" class="chk3" id="chk2-3"><label for="chk2-3">check3</label></li>
</ul>

<ul class="chk">
    <li><input type="checkbox" value="1" class="chk1" id="chk3-1"><label for="chk3-1">check1</label></li>
    <li><input type="checkbox" value="2" class="chk2" id="chk3-2"><label for="chk3-2">check2</label></li>
    <li><input type="checkbox" value="3" class="chk3" id="chk3-3"><label for="chk3-3">check3</label></li>
</ul>

クラス、chkを持つliのinputタグに対して処理を行います。
一番上がチェックされた場合、連動して一番上のチェックボックスにチェックが入ります。
サンプルデモ
※SinRaはRABIMAX管理人、らびが運営するHTML/JQuery専用のサイトです。

サンプルコードに実行するJQuery

$(function() {
    $('.chk input').on('change',function()
    {
      chkNum = $(this).attr('class');
      if($(this).prop('checked')) {
        $('.' + chkNum).prop('checked',true);
      }
      else {
        $('.' + chkNum).prop('checked',false);
      }
    });
});

こちらのJQueryを実行することによってすべてのチェックボックスにチェックをいれることが可能です！
ご覧いただきありがとうございました！
以上、RABIMAX管理人らびでしたっ！