JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="delivery_zones">
    <li class="continent">
        <input type="checkbox" name="continent" class="float-left"> Africa
        <span class="float-right toggle" style="padding: 0px 5px 0px 5px;"><img src="http://www.prbuzzer.com/images/downarrow-white.png"></span>
        <div class="clear"></div>
        
        <ul class="country_wrap" style="margin: 0px -4px -4px -4px;">
            <li class="country" style="padding-left: 24px;">
                <input type="checkbox" name="country" class="float-left" value="3"> Algeria
                <div class="clear"></div>
            </li>  
        </ul>
    </li>
    <li class="continent">
        <input type="checkbox" name="continent" class="float-left"> Europe
        <span class="float-right toggle" style="padding: 0px 5px 0px 5px;"><img src="http://www.prbuzzer.com/images/downarrow-white.png"></span>
        <div class="clear"></div>
        <ul class="country_wrap" style="margin: 0px -4px -4px -4px;">
            <li class="country" style="padding-left: 24px;">
               <input type="checkbox" name="country" class="float-left" value="239"> Aland Islands
               <div class="clear"></div>
            </li>
            <li class="country" style="padding-left: 24px;">
               <input type="checkbox" name="country" class="float-left" value="2"> Albania
                <span class="float-right toggle" style="padding: 0px 5px 0px 5px;"><img src="http://www.prbuzzer.com/images/downarrow-white.png"></span>
                <div class="clear"></div>
                <ul class="county_wrap" style="margin-left: -24px; margin-right: -4px;">
                    <li class="county" style="padding-left: 48px;">
                       <input type="checkbox" name="county" value=""> A
                    </li>
                    <li class="county" style="padding-left: 48px;"><input type="checkbox" name="county" value=""> B</li>
                </ul>
            </li>
         </ul>
    </li>
</ul>

CSS

#delivery_zones {
    border: 1px solid #222;
    width: 100%;
}
    #delivery_zones li {
        padding: 4px;
    }
        #delivery_zones li.continent {
            background-color: #222;
            color: #ffffff;
        }
            #delivery_zones li.continent:hover {
                background-color: #333;
            }
        #delivery_zones li.country {
            background-color: #aaa;
        }
            #delivery_zones li.country:hover {
                background-color: #bbb;
            }
        #delivery_zones li.county {
            background-color: #eee;
            color: #000;
        }
            #delivery_zones li.county:hover {
                background-color: #fff;
            }

JavaScript

// check/uncheck tree

$('#delivery_zones :checkbox').change(function(){                         $(this).siblings('ul').find(':checkbox').prop('checked', this.checked);
     if(this.checked){
         $(this).parentsUntil('#delivery_zones', 'ul').siblings(':checkbox').prop('checked', true);                       } else {                   
         $(this).parentsUntil('#delivery_zones', 'ul').each(function(){
             var $this = $(this);
             var childSelected = $this.find(':checkbox:checked').length;                  
             if(!childSelected){                              
                 $this.prev(':checkbox').prop('checked', false);
             }
         });
     }
});

// collapse countries and counties onload
$(".country_wrap").hide();                
$(".county_wrap").hide();                                 

// toggle continent listing onclick and change icon
$("li.continent").click(function(event){                  
    if($('.toggle img', this).attr('src') == "http://uk.primadonna.eu/images/arrow_white_up.gif"){
        $('.toggle img', this).attr('src', 'http://www.prbuzzer.com/images/downarrow-white.png');
        $('.country_wrap', this).slideUp("slow");
    } else {
        $('.toggle img', this).attr('src', 'http://uk.primadonna.eu/images/arrow_white_up.gif');
        $('.country_wrap', this).slideDown("slow");
    }
    event.stopPropagation();
}).children(":checkbox").click(function(event){
    event.stopPropagation();
});

// same as above, but for country
$("li.country").click(function(event){
    if($('.toggle img', this).attr('src') == "http://uk.primadonna.eu/images/arrow_white_up.gif"){
        $('.toggle img', this).attr('src', 'http://www.prbuzzer.com/images/downarrow-white.png');
        $('.county_wrap', this).slideUp("slow");
    } else {
        $('.toggle img', this).attr('src', 'http://uk.primadonna.eu/images/arrow_white_up.gif');
        $('.county_wrap', this).slideDown("slow");
    }
   ...