Selecting descendants of a category when ancestor is clicked
Okay, please don't be afraid and give it a try. I'm using the angular way, it seems a little bit difficult but it's actually really easy once you get used to it and works perfectly as soon as you understand it a little bit. If you need changes I'll provide whatever you need.
Edit: here you can see a live example for it plunker or course without css but it is your html

Let's get into it.
For testing purposes I created this category structure in my backend and called the group filter.


First you need to include this library you can of course use the {% includeJsRessource %} as well

&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"&gt;&lt;/script&gt;


Then you create 2 javascript arrays one for the Culture, Democracy... I call them parents and one for their children that belong to them

// get all filters of the first level
{% set filters = craft.categories.group('filter').level(1).find() %}
&lt;script type="text/javascript"&gt;
    var children = [];
    var parents = [];
    {% for filter in filters %}
        parents.push({
            title: "{{ filter.title }}",
            id: "{{ filter.id }}"
        });
        // now fetch all children for them
        {% set children = craft.categories.group('filter').descendantOf(filter).level(2).find() %}
        {% for child in children %}
            children.push({
                title: "{{ child.title }}",
                id: "{{ child.id }}",
                parent: "{{ filter.id }}"
            });
        {% endfor %}
    {% endfor %}
&lt;/script&gt;


In the end you'll have 2 array that could look like

Now the funny part starts
include this javascript file. You can ask whatever you want I'll explain it. Even if the syntax and everything what's going on seems a little bit strange, but make sure this is loaded after the library from above

var  myApp = angular.module('myApp',[]).config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

myApp.controller('filterController', ['$scope', function ($scope) {
    // all parents
    $scope.parents = parents;
    // all children
    $scope.children = children;

    // return if the parent is selected or not
    $scope.filterBySelectedParent = function (item) {
        return $scope.selectedParents.indexOf(item.parent) !== -1;
    };

    // an array with all selected parent ids
    $scope.selectedParents = [];

    // include an item to the array or slice it when the input it clicked
    $scope.addFilter = function(id){
        var index = $scope.selectedParents.indexOf(id);
        if(index === -1){
            $scope.selectedParents.push(id);
        }else{
            $scope.selectedParents.splice(index, 1);
        }
    }
}]);


And finally your new html

&lt;!-- this is your menu or your filter bar or whatever you want to call it --&gt;
&lt;!-- I inspected your html and tried to use that but you must include ng-app and ng-controller somewhere --&gt;
&lt;div ng-app="myApp" ng-controller="filterController"&gt;
    &lt;!-- your first ul... all your parents, the first filter in your page --&gt;
    &lt;ul&gt;
        &lt;li ng-repeat="filter in parents"&gt;
            &lt;label class=""&gt;
                &lt;input type="checkbox" ng-click="addFilter(filter.id);" value="{[{filter.id}]}"&gt;&lt;span&gt;{[{ filter.title }]}&lt;/span&gt;
            &lt;/label&gt;
        &lt;/li&gt;
    &lt;/ul&gt;

    &lt;!-- all your children, the second filter in your page --&gt;
    &lt;ul&gt;
        &lt;li class="" ng-repeat="child in children | filter: filterBySelectedParent"&gt;
            &lt;label class="" &gt;
                &lt;input type="checkbox" data-name="selectItemfocusArea" value="{[{ child.id }]}"&gt;&lt;span&gt;{[{ child.title }]}&lt;/span&gt;
            &lt;/label&gt;
        &lt;/li&gt;
    &lt;/ul&gt;

    &lt;!-- include the rest here --&gt;
&lt;/div&gt;


Explanation: so what actually happens is the following 


you create 2 arrays in javascript based on your backend inputs
angular renders your menu based on those two arrays but the second one has a filter. Only clicked items of the first array are shown
as soon as someone clicks on an filter it is included in an array $scope.selectedParents 
any change in this array is recognized automatically which results, that the html renders again => your other filters are shown.


Please tell me if I missunderstood you somehow.. based on my current state I can change nearly everything really easily in just a few clicks. For example if you would like to automatically select your children you would include ng-checked="filterBySelectedParent(child)" on your input and remove the | filter: filterBySelectedParent.. that's it