如何计算变绿的项目a <p> 当所有项目都标记为绿色？

Question

I have made a checklist. Now I want to show a text when all the checkboxes are green. I don't know how can I count the checkbox. Somebody who can help me to this code?

 $(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> 

Answer 1

How about keeping a counter of green buttons? For that you need to declare a variable, eg var count = 0; , then whenever a button turns green increase the counter, whenever reset is clicked, reset the count too. Then if the counter reached a certain count, do what you want to do:

  var count = 0;

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

    count += 1;
    if(count > 5) { /*...*/ }
  });

  //...

Answer 2

try here: 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> 

Answer 3

You can count child elements of ul. I have modified your code for the desired result. You can check here . I have created one function for checking green color class

 $(document).ready(function() { $("i").click(function() { //$(this).css("color", "#5c8c44"); $(this).addClass('green') $(this).parent().css("font-weight", "bold"); check(); }); $("#reset").click(function() { $("i").css("color", "red"); $("li").css("font-weight", "normal"); document.getElementById('output').innerHTML = ''; }); function check() { let ul_li_count = document.getElementById('ul_class').childElementCount; var numItems = $('.green').length; //console.log(numItems); if (numItems == ul_li_count) { let output = `<span> All the checkboxs are Clicked <\\/span>`; document.getElementById('output').innerHTML = output; } } }); 

 ul li { list-style: none; } ul li i { color: red; } .green { color: #5c8c44 } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"> <h2>Checklist</h2> <ul id="ul_class"> <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> <div id="output"></div><button id="reset">Reset checklist</button>