<script type="text/javascript" charset="utf-8">
    
    
    // A function to handle "child" checkboxes
    function dependantCheckboxes(qID, primaryCodes, secondaryCodes) {
        // Identify the elements annd assign classes/attributes
        var thisQuestion = $('#question'+qID);
        thisQuestion.addClass('with-dependants');
        $.each(primaryCodes, function(i, val) {
            var thisItem = $('li[id$="X'+qID+val+'"]');
            $(thisItem).addClass('level-1 parent-item').attr('data-code', val).attr('data-level', '1');
        });    
        $.each(secondaryCodes, function(i, val) {
            var thisItem = $('li[id$="X'+qID+val+'"]');
            var thisParent1 = $(thisItem).prevAll('li[data-level="1"]:eq(0)');
            $(thisItem).addClass('level-2 parent-item child-item').attr('data-code', val).attr('data-level', '2').attr('data-parent-1', $(thisParent1).attr('data-code'));
        });    
        
        // A function to handle the states of child items
        function handleChildren(el) { 
            var thisitem = $(el).closest('li');
            var thisCode = $(thisitem).attr('data-code');
            var thisLevel = $(thisitem).attr('data-level');
            var thisChildren = $('li[data-level="'+(Number(thisLevel)+1)+'"][data-parent-'+thisLevel+'="'+thisCode+'"]', thisQuestion);
            
            // Hide/show the secondary answers accordingly
            if (!$(el).is(':checked')) {
                $(thisChildren).fadeOut(300, function(e) {            
                    $('input:checkbox', thisChildren).prop('checked', false).trigger('change');
                });    
            }
            else {
                $(thisChildren).fadeIn(300); 
            }
        }
        
        // Initial states of the secondary answers 
        $('.parent-item input:checkbox', thisQuestion).each(function(i) { 
            handleChildren($(this));
        });
        
        // A listener on the primary answer to show or hide secondary answers 
        $('.parent-item input:checkbox', thisQuestion).on('change', function(e) { 
            handleChildren($(this));
        });
    }
 
 
    $(document).on('ready pjax:scriptcomplete',function(){
        dependantCheckboxes(
            {QID}, 
            ['SQ1', 'SQ2', 'SQ3'], // First-level sub-question codes 
            ['SQ31','SQ32','SQ33', 'SQ34'] // Second-level sub-question codes
        );
    });      
</script>

<style type="text/css">.with-dependants .child-item {
            display: none;
        }
        
        .with-dependants li.level-2 {
            margin-left: 2.5em;
        }
        
        .with-dependants li.level-3 {
            margin-left: 5em;
        }
</style>