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){
                // Using `prevAll` and `:first` to get the closest previous checkbox
                $this.prevAll(':checkbox:first').prop('checked', false);
             }
         });
     }
});

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

// Merged two click handlers
$("#delivery_zones").click(function(event){
    var root = event.target;              // Get the target of the element
    if($.nodeName(root, 'input')) return; // Ignore input
    else if(!$.nodeName(root, 'li')) {
        root = $(root).parents('li').eq(0); // Get closest <li>
    }

    // Define references to <img>
    var img = $('.toggle img', root).eq(0);
    // Define reference to one of the wrap elements *
    var c_wrap = $('.country_wrap, .county_wrap', root).eq(0);
    if(img.attr('src') == "http://uk.primadonna.eu/images/arrow_white_up.gif"){
        img.attr('src', 'http://www.prbuzzer.com/images/downarrow-white.png');
        c_wrap.slideUp("slow");
    } else {
        img.attr('src', 'http://uk.primadonna.eu/images/arrow_white_up.gif');
        c_wrap.slideDown("slow");
    }
});