JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>
  <input type="checkbox" parents="" id="10" />
  <ul>
    <li><input type="checkbox" parents="10" id="20" /></li>
  </ul>
</li>
</ul>

<button>
Clique ou kwa
</button>
<p class="lol">
COUCOU MA GUEULE
</p>

JavaScript

$('input[type="checkbox"]').on("click", function(){
    var parents = $(this).attr('id');
    if(($this).prop("checked") = true){
    	$(this).parent().find('input[parents=' + parents + ']').prop('checked', true);
    }
   
});

$(document).ready(function(){
    $("button").on("click", function(){
        $("p.lol").slideToggle();
    });
});

$( "input" )
  .change(function() {
    var $input = $( this );
    $( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
      ".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
      ".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
  })
  .change();