Parent input show/hide checkboxes

I have a page with 3 hidden areas and 3 checkboxes to show/hide the corresponding area. When the checkbox is ticked the area is shown. Also, each hidden area has its own checkbox within the span.

Required: When an area is shown/unhidden and the checkbox within that area is also ticked it will show "area-x". Area-x will only show though when all unhidden spans checkboxes are ticked.

$(function() {
    Areas();
});

function Areas() {

  $('span[data-name="Comms engineering"]').hide();
  $('span[data-name="Comms engineering - review and sign off"]').hide();
  $('span[data-name="Control engineering"]').hide();
  $('span[data-name="Control engineering - review and sign off"]').hide();
  $('span[data-name="Protection engineering"]').hide();
  $('span[data-name="Protection engineering - review and sign off"]').hide();



   var isCOMMS =  $('input[name="Attributes.SFRs.AreasOfResponsibilities"][data-savedvalue="Comms Engineering"]:checked').length > 0;
   var isCONTROL = $('input[name="Attributes.SFRs.AreasOfResponsibilities"][data-savedvalue="Control engineering"]:checked').length > 0;
   var isPROTECT =  $('input[name="Attributes.SFRs.AreasOfResponsibilities"][data-savedvalue="Protection engineering"]:checked').length > 0;



if(isCOMMS) {
  $('span[data-name="Comms engineering"]').show();
  $('span[data-name="Comms engineering - review and sign off"]').show();
}

if(isCONTROL) {
  $('span[data-name="Control engineering"]').show();
  $('span[data-name="Control engineering - review and sign off"]').show();
}

if(isPROTECT) {
  $('span[data-name="Protection engineering"]').show();
  $('span[data-name="Protection engineering - review and sign off"]').show();
}

};