JSFiddle - React, Tailwind, and code Playground

by silvajeff

HTML

HTML:
       <ul>
          <li class="collapsed expanded">
              <input id="0" class="boundParent" type="checkbox" >
               Australia
                    <ul style="display: block;">
                      <li>
                         <input id="0/" class="boundChild" type="checkbox" >
                      </li>
                    </ul>
          </li>
       </ul>

JavaScript

$(function() {
            $("input.boundChild[type=checkbox]").click(function() {              
                var checked = $(this).prop("checked");
                $(this).closest("input.boundParent").prop("checked", true);
            });
        });

        $(function() {
            $("input.boundParent[type=checkbox]").click(function() {
                var checked = $(this).prop("checked");
                $(this).parent().find("input[type=checkbox]").prop("checked", checked);
            });
        });