<script type="text/javascript" charset="utf-8">
 
 
  // A function to handle "child" checkboxes
  function dependantCheckboxes(qID, primaryCodes, secondaryCodes, tertiaryCodes) {
    // 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'));
    });
    $.each(tertiaryCodes, function(i, val) {
      var thisItem = $('li[id$="X'+qID+val+'"]');
      var thisParent1 = $(thisItem).prevAll('li[data-level="1"]:eq(0)');
      var thisParent2 = $(thisItem).prevAll('li[data-level="2"]:eq(0)');
      $(thisItem).addClass('level-3 child-item').attr('data-code', val).attr('data-level', '3').attr('data-parent-1', $(thisParent1).attr('data-code')).attr('data-parent-2', $(thisParent2).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
      ['SQ11', 'SQ12', 'SQ21', 'SQ22'], // Second-level sub-question codes
      ['SQ111', 'SQ112', 'SQ113', 'SQ121', 'SQ211', 'SQ212', 'SQ221', 'SQ222', 'SQ223'] // Third-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>