Is there a way to tally up the number of green items and display a <p> tag when every item has been marked green?

Question

Is there a way to tally up the number of green items and display a <p> tag when every item has been marked green?

I have created a checklist that includes checkboxes. I am looking to display some text when all the checkboxes are checked and green. Can someone assist me with writing the code for this functionality?

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

javascript jquery html css

Answer 1

Answer №1

You can find the solution here or here

$(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 boxes");
    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 2

You can find the solution here or here

$(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 boxes");
    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

Answer №2

One way to track the number of green buttons is by implementing a counter variable. Start by initializing the count variable, for example, var count = 0;. Then, every time a button changes to green, increment the counter. When the reset button is clicked, remember to reset the count as well. Once the count reaches a specific number, you can execute your desired actions:


var count = 0;

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

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

// Additional code can be added here

Answer 4

One way to track the number of green buttons is by implementing a counter variable. Start by initializing the count variable, for example, var count = 0;. Then, every time a button changes to green, increment the counter. When the reset button is clicked, remember to reset the count as well. Once the count reaches a specific number, you can execute your desired actions:


var count = 0;

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

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

// Additional code can be added here

Answer 5

Answer №3

If you want to count the child elements of ul, I have made some changes to your code to achieve this. You can see the updated code and functionality here. A new function has been added to check for the 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>

Answer 6

If you want to count the child elements of ul, I have made some changes to your code to achieve this. You can see the updated code and functionality here. A new function has been added to check for the 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>

Is there a way to tally up the number of green items and display a <p> tag when every item has been marked green?

Answer №1

Answer №2

Answer №3

Similar questions

Encountering an issue of duplicate key error when using multiple v-for loops with various keys

Removing a selected row from a data table using an HTTP request in Angular 2

Creating a double-layered donut chart with Chart.js

Error occurred in next.js environment file when referencing process.env keys as strings in .env.local file

Looking to obtain the coordinates of a draggable element?

Guide on uploading files using Vue.js2 and Laravel 5.4

Encountering a problem while creating a Page Object in webdriver.io - getting the error "setValue is not a function" or "cannot read property 'setValue' of undefined"

Getting the chosen option from a dropdown list mapped in ReactJS

The assets path is the directory within the installed package that houses the main application files following the completion of a

ajax [rails] allows for the entire page to be updated without a full reload

Tips for displaying an edit action icon when hovering over specific text

What is the purpose of requiring the explicit invocation of app.listen(port) to enable express-ws to function properly?

Receiving HTTP POST data using Classic ASP script

Steps for importing JQuery into a custom DNN module

While working on creating a game prototype using CSS and Javascript, I encountered an issue where the icons were losing their color when trying to print the document

The chat text will automatically scroll down, displaying information loaded from the database

Sending data between two elements when a jQuery event is triggered

Is it possible to use jQuery validate for remote parsing with two fields in a single call

Angular has the feature of a right float button with *ngfor

Utilizing Twitter API authentication to prevent hitting rate limits