diff --git a/konova/templates/konova/widgets/checkbox-tree-select-content.html b/konova/templates/konova/widgets/checkbox-tree-select-content.html
new file mode 100644
index 00000000..9bf57253
--- /dev/null
+++ b/konova/templates/konova/widgets/checkbox-tree-select-content.html
@@ -0,0 +1,21 @@
+{% load l10n fontawesome_5 %}
+
+{% for code in codes %}
+<div class="ml-4 tree-element">
+    <label class="tree-label" role="{% if not code.is_leaf%}button{% endif %}" for="input_{{code.pk|unlocalize}}" id="{{code.pk|unlocalize}}" data-toggle="collapse" data-target="#children_{{code.pk|unlocalize}}" aria-expanded="true" aria-controls="children_{{code.pk|unlocalize}}">
+        {% if code.is_leaf%}
+        <input class="tree-input" id="input_{{code.pk|unlocalize}}" name="{{ widget.name }}" type="checkbox" value="{{code.pk|unlocalize}}" {% if code.pk|unlocalize in widget.value %}checked{% endif %}/>
+        {% else %}
+        {% fa5_icon 'angle-right' %}
+        {% endif %}
+        {{code.long_name}}
+    </label>
+    {% if not code.is_leaf %}
+    <div id="children_{{code.pk|unlocalize}}" data-toggle="collapse" class="collapse tree-element-children">
+        {% with code.children as codes %}
+        {% include 'konova/widgets/checkbox-tree-select-content.html' %}
+        {% endwith %}
+    </div>
+    {% endif %}
+</div>
+{% endfor %}
\ No newline at end of file
diff --git a/konova/templates/konova/widgets/checkbox-tree-select.html b/konova/templates/konova/widgets/checkbox-tree-select.html
index 5b40d3f1..ddcc60c0 100644
--- a/konova/templates/konova/widgets/checkbox-tree-select.html
+++ b/konova/templates/konova/widgets/checkbox-tree-select.html
@@ -1,23 +1,42 @@
-{% load l10n fontawesome_5 %}
+<div id="tree-root">
+    {% include 'konova/widgets/checkbox-tree-select-content.html' %}
+</div>
 
-<div>
-    {% for code in codes %}
-    <div class="ml-4">
-        <label role="{% if not code.is_leaf%}button{% endif %}" for="input_{{code.pk|unlocalize}}" id="{{code.pk|unlocalize}}" data-toggle="collapse" data-target="#children_{{code.pk|unlocalize}}" aria-expanded="true" aria-controls="children_{{code.pk|unlocalize}}">
-            {% if code.is_leaf%}
-                <input id="input_{{code.pk|unlocalize}}" name="{{ widget.name }}" type="checkbox" value="{{code.pk|unlocalize}}" {% if code.pk|unlocalize in widget.value %}checked{% endif %}/>
-            {% else %}
-                {% fa5_icon 'angle-right' %}
-            {% endif %}
-            {{code.long_name}}
-        </label>
-        {% if not code.is_leaf %}
-            <div id="children_{{code.pk|unlocalize}}" data-toggle="collapse" class="collapse">
-                {% with code.children as codes %}
-                    {% include 'konova/widgets/checkbox-tree-select.html' %}
-                {% endwith %}
-            </div>
-        {% endif %}
-    </div>
-    {% endfor %}
-</div>
\ No newline at end of file
+<script>
+    function toggleSelectedCssClass(element){
+        element = $(element);
+        var cssClass = "badge rlp-r"
+
+        var directParent = element.closest(".tree-element-children")
+        var root = element.parents(".tree-element-children")
+
+        var otherCheckedInputsOfParent = directParent.find('.tree-input:checked');
+        var otherCheckedInputsOfRoot = root.find('.tree-input:checked');
+
+        if(otherCheckedInputsOfParent.length == 0){
+            var parentLabel = directParent.siblings(".tree-label");
+            parentLabel.removeClass(cssClass)
+            if(otherCheckedInputsOfRoot.length == 0){
+                var rootLabel = root.siblings(".tree-label")
+                rootLabel.removeClass(cssClass)
+            }
+        }else{
+            var rootAndParentLabel = root.siblings(".tree-label");
+            rootAndParentLabel.addClass(cssClass);
+        }
+
+    }
+
+    function changeHandler(event){
+        toggleSelectedCssClass(this);
+    }
+
+    // Add event listener on changed checkboxes
+    $(".tree-input").change(changeHandler);
+
+    // initialize all pre-checked checkboxes (e.g. on an edit form)
+    var preCheckedElements = $(".tree-input:checked");
+    preCheckedElements.each(function (index, element){
+        toggleSelectedCssClass(element);
+    })
+</script>
\ No newline at end of file