javascript - 当所有元素都标记为绿色时，如何计算变为绿色并显示<p>的元素？

我做了一个清单。现在，我想在所有复选框均为绿色时显示文本。我不知道如何计算该复选框。有人可以帮助我编写此代码吗？

$(document).ready(function() {
  $("i").click(function() {
    $(this).css("color", "#5c8c44");
    $(this).parent().css("font-weight", "bold");
  });

  $("#reset").click(function() {
    $("i").css("color", "red");
    $("li").css("font-weight", "normal");
  });
});

ul li {
  list-style: none;
}

ul li i {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

<h2>Checklist</h2>
<ul>
  <li><i class="fas fa-check-square"></i> Item 1</li>
  <li><i class="fas fa-check-square"></i> Item 2</li>
  <li><i class="fas fa-check-square"></i> Item 3</li>
  <li><i class="fas fa-check-square"></i> Item 4</li>
  <li><i class="fas fa-check-square"></i> Item 5</li>
  <li><i class="fas fa-check-square"></i> Item 6</li>
  <li><i class="fas fa-check-square"></i> Item 7</li>
  <li><i class="fas fa-check-square"></i> Item 8</li>
  <li><i class="fas fa-check-square"></i> Item 9</li>
  <li><i class="fas fa-check-square"></i> Item 10</li>
</ul>
<button id="reset">Reset checklist</button>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

最佳答案

在这里尝试：https://jsfiddle.net/3c0uskLy/
https://jsfiddle.net/83jcvaLr/

$(document).ready(function() {
  $("i").click(function() {
    $(this).css("color", "#5c8c44").addClass("grencolor")
    $(this).parent().css("font-weight", "bold");
    ChkList = $(".grencolor").length;
    $("#count1").text("").append("you've marked (" + ChkList + ")/10 boxs");
    if ($("li").length == ChkList) {
      $("#count").text("").append("you've got everything!")
    } else {
      $("#count").text("").append(" you don't have all the items")
    }
  });

  $("#reset").click(function() {
    $("#count").text("").append("0")
    $("i").removeClass("grencolor")
    $("i").css("color", "red");
    $("li").css("font-weight", "normal");
  });
});

ul li {
  list-style: none;
}

ul li i {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

<h2>Checklist</h2>
<p id=count1></p>
<ul>
  <li><i class="fas fa-check-square"></i> Item 1</li>
  <li><i class="fas fa-check-square"></i> Item 2</li>
  <li><i class="fas fa-check-square"></i> Item 3</li>
  <li><i class="fas fa-check-square"></i> Item 4</li>
  <li><i class="fas fa-check-square"></i> Item 5</li>
  <li><i class="fas fa-check-square"></i> Item 6</li>
  <li><i class="fas fa-check-square"></i> Item 7</li>
  <li><i class="fas fa-check-square"></i> Item 8</li>
  <li><i class="fas fa-check-square"></i> Item 9</li>
  <li><i class="fas fa-check-square"></i> Item 10</li>
</ul>
<p id=count></p>
<button id="reset">Reset checklist</button>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>