JSFiddle - React, Tailwind, and code Playground

HTML

<form class="form-horizontal" id = "form" method="POST" action="">
    <div class="form-group">
        <label for="direction" class="col-xs-3 control-label">Направления:</label>
        <div class="col-xs-9">
            <ul class="ul-treefree ul-dropfree">
                <li>
                    <div class='drop'></div><label><input type='checkbox'/>Кормовая часть</label>
                    <ul>
                        <li>
                            <div class='drop'></div><label><input type='checkbox'/>Комбикорм, БМВК</label>
                            <ul>
                                <li>
                                    <div class='drop'></div><label><input type='checkbox'/>Молочные продукты</label>
                                    <ul>
                                        <li>
                                            <label><input type='checkbox' name='classes[]' value='17'/>ЗЦМ</label>
                                        </li>
                                        <li>
                                            <label><input type='checkbox' name='classes[]' value='18'/>ЗОМ</label>
                                        </li>
                                        <li>
                                            <label><input type='checkbox' name='classes[]' value='19'/>Молочная сыворотка</label>
                                        </li>
                                        <li>
                                            <label><input type='checkbox' name='classes[]' value='20'/>БЖК</label>
                                        </li>
                                        <li>
                                            <div class='drop'></div><label><input type='checkbox'/>Сухое молоко</label>
                                            <ul>
                                                <li>
                                                    <label><input type='checkbox' name='classes[]' value='22'/>Сухое...

CSS

.list-select ul { display: none;}
.list-select li:hover > ul { display: block;}
ul.ul-treefree { padding-left:25px;}
ul.ul-treefree ul { margin:0; padding-left:6px; }
ul.ul-treefree li { position:relative; list-style:none outside none; border-left:solid 1px #999; margin:0; padding:0 0 0 19px; line-height:23px; }
ul.ul-treefree li span {font-size: 20px; cursor:pointer; margin-left: 5px; }
ul.ul-treefree li:before { content:''; display:block; border-bottom:solid 1px #999; position:absolute; width:18px; height:11px; left:0; top:0; }
ul.ul-treefree li:last-child { border-left:0 none; }
ul.ul-treefree li:last-child:before { border-left:solid 1px #999; }
ul.ul-dropfree div.drop {
  width:11px;
  height:11px;
  position:absolute;
  z-index:10;
  top:6px;
  left:-6px;
  background-image:   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');
  background-position:-11px 0;
  background-repeat:no-repeat;
  cursor:pointer;
}
    
.shine {
    -moz-text-shadow:0 0 10px #c00; 
    -webkit-text-shadow:0 0 10px #c00; 
    text-shadow:0 0 10px #c00;
}

JavaScript

$(document).ready(function() {
    $(".ul-dropfree div.drop").click(function() {
        $(this).nextAll("ul").slideToggle(400);
        if ($(this).nextAll("ul").css('display') == 'none') {
            $(this).css({
                'background-position': "-11px 0"
            });
        } else {
            $(this).css({
                'background-position': "0 0"
            });
        }
    });

    $(".ul-dropfree").find("ul").slideUp(400).
    parents("li").children("div.drop").css({
        'background-position': "0 0"
    });

    $('[type="checkbox"]').change(function() {
         $(this).closest('li').find('[type="checkbox"]').prop('checked', this.checked);
        /*
             var currcheck = $(this).parent().siblings('ul');
            //отмечаем или снимаем отметку с детей
            if ($(this).prop("checked") == true){
                $(currcheck).find("input:checkbox").prop({"checked":true, "indeterminate":false});
            } else {
                $(currcheck).find("input:checkbox").prop({"checked":false, "indeterminate":false});
            }
         */
         
            $("input:checkbox").on('change', function() {
        var all_check = $(this).parent().siblings('ul').find("input:checkbox");
       //отмечаем или снимаем отметку с детей
       if ($(this).prop("checked") == true){
           $(all_check).prop({"checked":true, "indeterminate":false});
       } else {
           $(all_check).prop({"checked":false, "indeterminate":false});
       }
        $(this).parents("li").each(function(){
            var all = $(this).find("input:checkbox").not(":first"); //выбираем всех чекбоксов-детей-внуков и т.д.
            var check = $(all).filter("input:checkbox:checked"); //выбираем чекнутые чекбоксы среди полученного набора
            if (check.length == all.length) { //если кол-во чекнутых равно общему кол-ву чекбоксов, то чекаем и этот чекбокс
                $(this).find("input:checkbox:first").prop({"indeterminate":false,...