<div class="form interests-form">
  <div class="row small-space-xs">
    <?php foreach ($categories as $key => $value) { ?>
      <div class="col-xs-12 <?php echo (!$interests_categories) ? 'col-ms-6 col-sm-4' : '' ?>"  <?php echo ($interests_categories) ? 'style="border-bottom: 1px solid #DDD;"' : '' ?>>
        <div class="content-box">
          <label>
            <input type="checkbox" <?php echo ($value['checked']) ? 'checked="checked"' : '' ?> name="categories[<?php echo $value['id'] ?>][status]" id="<?php echo $value['id'] ?>" class="js-check-control">
            <strong><?php echo $value['name'] ?></strong>
          </label>
          <?php if ($interests_categories && isset($value['children']) && $value['children']) { ?>
            <div class="row no-space-xs">
              <?php foreach ($value['children'] as $key2 => $value2) { ?>
                <div class="col-xs-12 col-ms-6 col-sm-4">
                  <div class="content-box">
                    <label>
                      <input type="checkbox" <?php echo ($value2['checked'] || $value['checked']) ? 'checked="checked"' : '' ?> name="categories[<?php echo $value['id'] ?>][<?php echo $value2['id'] ?>]" data-parent-id="<?php echo $value['id'] ?>" id="<?php echo $value2['id'] ?>" class="js-check-controlled <?php echo $value['id'] ?>">
                      <span><?php echo $value2['name'] ?></span>
                    </label>
                  </div>
                </div>
              <?php } ?>
            </div>
          <?php } ?>
        </div>
      </div>
    <?php } ?>
  </div>
</div>
<script>
$(document).ready(function(){
  markStatusCheckbox();
  
  $('.js-check-control').on('change', function(e) {
    $('.js-check-controlled.' + $(this).attr('id')).prop('checked', $(this).prop('checked'));
    markStatusCheckbox();
  });
  $('.js-check-controlled').on('change', function(){
    if ($('.js-check-controlled.' + $(this).data('parent-id')).length  == $('.js-check-controlled.' + $(this).data('parent-id')).filter(':checked').length) {
      $('.js-check-control#' + $(this).data('parent-id')).prop('checked', true);
    } else {
      $('.js-check-control#' + $(this).data('parent-id')).prop('checked', false);
    }
    markStatusCheckbox();
  });
  function markStatusCheckbox() {
    $('.js-check-control, .js-check-controlled').each(function() {
      if($(this).prop('checked')) {
        $(this).parent().addClass('tm-checked');
      } else {
        $(this).parent().removeClass('tm-checked');
      }
    });
  }
});
</script>