未选中某些或所有复选框时显示消息

Question

我在此页面上具有多个复选框，并且当单击时会显示一个元素。

我有这个简化的版本以简单地显示它：

<!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

Checkbox 1: <input type="checkbox" id="check1"  onclick="box1()"><br>
Checkbox 2: <input type="checkbox" id="check2"  onclick="box2()">

<p id="fill">No boxes are checked</p>

<p id="text" style="display:none">Checkbox1 is CHECKED!</p>
<p id="text2" style="display:none">Checkbox2 is CHECKED!</p>


<script>
function box1() {
  var checkBox = document.getElementById("check1");
  var text = document.getElementById("text");
  var fill = document.getElementById("fill");
  if (checkBox.checked == true){
      text.style.display = "block";
      fill.style.display = "none";
  } else {
      text.style.display = "none";
      fill.style.display = "block";
  }
}
</script>
<script>
function box2() {
  var checkBox = document.getElementById("check2");
  var text = document.getElementById("text2");
  if (checkBox.checked == true){
    text.style.display = "block";
    fill.style.display = "none";
  } else {
     text.style.display = "none";
     fill.style.display = "block";
  }
 }
</script>

</body>
</html>

我的问题是，如图所示，该文本甚至显示一个复选框。我该如何有效地做到这一点？谢谢！