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

Filtering Array Values within an Object using JavaScript

Empty HTML elements

How can I remove the bouncing effect of the top bar in Chrome when scrolling in Three

Steps to display a temporary placeholder image while waiting for the main image to load

Tips on setting dynamic headers in tabulator

Utilizing Flask to insert data into a MySQL database table

The mobile homepage is experiencing issues with its two scrollbars - one large and one small - they do not seem to

Exploring the Transition from React.js with Material UI to Next.js for Server-Side Rendering: A Comparison of Tailwind CSS, Material UI, and Chakra UI

`Need to clean parameters for safe use in JavaScript code?`

Organizing an Ordered List of Items into Alternating Columns Using HTML

Utilize MySQL/Javascript to determine percentages

Tips for combining HTML and JavaScript on a WordPress site

Displaying the Status of a Script that is Running Asynchronously

Implement consistent styling across several elements within a component

Tips on avoiding blurring when making an autocomplete selection

Azure webhosting blocks the use of AJAX calls

Continuing the chunked file upload process using blueimp jQuery-File-Upload will allow for all uploads to be completed simultaneously

Post a message utilizing javascript

After integrating Vue + Inertia into my Laravel 10 project, I encountered an issue where I am receiving an error stating 'autocomplete not a function' when trying to load a Vue

Sending request results to the client's browser in Node.js - A step-by-step guide