JSFiddle - React, Tailwind, and code Playground

HTML

<ul>  
         <li><input type="checkbox" level="child"  name="somename1" value="1" /> Child 1</li>
         <li><input type="checkbox" level="child"  name="somename2" value="2" /> Child 2 <br />
				<ul>
                    <li><input type="checkbox" level="subchild" name="somename1" value="3" />Sub Child 1</li>
                    <li><input type="checkbox" level="subchild" name="somename2" value="3" />Sub Child 2</li>
				</ul>
		 </li>
         <li ><input type="checkbox" level="child"  name="somename3" value="3" /> Child 3</li>
     </ul>

JavaScript

$('input[@type=checkbox][level="child"]').click(function (event) {
        var checked = $(this).is(':checked');
        if (checked) {
          alert("checked");
        } else { //for click child to uncheck subchild
            alert("when unchecked");
            $(this).closest('ul > li').children('input[@type=checkbox][level="subchild"]').attr('checked', false);
            
        }
});