if else or switch html checkbox get value

what coding html if else or switch for checkbox? Example when tick 1 checkbox 'text' statement will appear. But if tick 3 checkbox the statement change to 'another text'. Given my coding; If tick 'cat' checkbox 'British shorthair' checkbox will appear and click again 'cute' text appear. How to make it if two or more checkbox tick the text change example like 'super cute'

<script type="text/javascript">
  function ShowHideDiv(Cat) {
    var dvCat = document.getElementById("bigCat");
    bigCat.style.display = Cat.checked ? "block" : "none";
    console.log(Cat.value)
    console.log("Text Inside LABEL:" + Cat.parentNode.textContent)

  }
</script>

<label for="Cat">
    <input type="checkbox" id="Cat" onclick="ShowHideDiv(this)" value="cat"/> Cat 
</label>

<script type="text/javascript">
  function ShowHideDiv2(Rabbit) {
    var bigRabbit = document.getElementById("bigRabbit");
    bigRabbit.style.display = Rabbit.checked ? "block" : "none";
    console.log(Rabbit.value)
    console.log("Text Inside LABEL:" + Rabbit.parentNode.textContent)
  }
</script>

<label for="Rabbit">
    <input type="checkbox" id="Rabbit" onclick="ShowHideDiv2(this)" value="Rabbit"/> Rabbit 
</label>

<div id="bigCat" style="display: none">

  <label> 
    <input type="checkbox" id="bigSubCat" /> British shorthair 
</label>

  <label> 
    <p id="subCats1" ></p> 
</label>

  <script>
    document.getElementById("bigSubCat").addEventListener("click", function() {
      document.getElementById("subCats1").innerHTML = "Cute";
    });
  </script>

  <label>
        <input type="checkbox" id="bigSubCat" /> Exotic Shorthair 
</label>
</div>
<div id="bigRabbit" style="display: none">

  <label> 
    <input type="checkbox" id="bigSubRabbit" /> White Rabbit
</label>

  <label>
        <input type="checkbox" id="bigSubRabbit" /> Black Rabbit 
</label>