親にチェックするだけで子や孫のチェックボックスもまとめてチェックしたい

Question

前提・実現したいこと

複数のチェックボックス全てにチェックを入れたり外したりということを実現させようと思っていますが、labelでinput要素を挟むと、できなくなってしまいます。

jQueryの方を書き換えてなんとか、実現させたいのですが、どこをどの様に変更すればいいのでしょうか。

どなたか教えてくださいませ。
よろしくお願いいたします。

該当のソースコード

<ul>
	<li><label><input type="checkbox"><span>親</span></label>
		<ul>
			<li><label><input type="checkbox"><span>子1</span></label></li>
			<li><label><input type="checkbox"><span>子2</span></label></li>
			<li><label><input type="checkbox"><span>子3</span></label>
				<ul>
					<li><label><input type="checkbox"><span>子孫3-1</span></label></li>
					<li><label><input type="checkbox"><span>子孫3-2</span></label></li>
					<li><label><input type="checkbox"><span>子孫3-3</span></label></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

$(function() {
	$("ul input:checkbox").change(function(){
		if ($(this).is(':checked')) {
			$(this).parent().find("input:checkbox").prop('checked', true);
		}
		else {
			$(this).parent().find("input:checkbox").prop('checked', false);
			$(this).parents('li').each(function(){
					$(this).children('input:checkbox').prop('checked', false);
			});
		}
	});
});

Answer 1

$(function(){
  $(':checkbox').on('change',function(){
    $(this).closest('li').find(':checkbox').prop('checked',$(this).prop('checked'));
  });
});

Answer 2

$(function() {
   $("ul input:checkbox").change(function() {
      if ($(this).is(":checked")) {
         $(this)
            .closest("li")
            .find("input:checkbox")
            .prop("checked", true);
      } else {
         $(this)
            .closest("li")
            .find("input:checkbox")
            .prop("checked", false);
      }
   });
});

一番近い親を探すにはclosest()が便利です。

Answer 3

        if ($(this).is(':checked')) {
            $('input:checkbox', $(this).closest('li')).prop('checked', true);
        } else {
            $('input:checkbox', $(this).closest('li')).prop('checked', false);
            $('input:checkbox:eq(0)', $(this).parents('li')).prop('checked', false);
        }

https://api.jquery.com/eq-selector/