ansaurus

Question

Count the number of checked check-boxes and display them on a fixed div using jQuery

Answer 1

+1 A:

To select checked checkboxes, you need the :checked psuedo-class. You also need to observe each checkbox, and when its setting changes, update the count and show or hide the div. Here’s one way to do that:

$(document).ready(function () {
  $("input[type=checkbox]").each(function () {
    $(this).change(updateCount);
  });

  updateCount();

  function updateCount () {
    var count = $("input[type=checkbox]:checked").size();

    $("#count").text(count);
    $("#status").toggle(count > 0);
  };
});

Where #count is the element that will show the count (perhaps a paragraph tag), and #status is the div you want to show/hide.

Full HTML example, for reference:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("input[type=checkbox]").each(function () {
          $(this).change(updateCount);
        });

        updateCount();

        function updateCount () {
          var count = $("input[type=checkbox]:checked").size();

          $("#count").text(count);
          $("#status").toggle(count > 0);
        };
      });
    </script>
  </head>
  <body>
    <ul>
      <li><input type="checkbox"> One</li>
      <li><input type="checkbox"> Two</li>
      <li><input type="checkbox"> Three</li>
    </ul>

    <div id="status">
      <p id="count">0</p>
    </div>
  </body>
</html>

Todd Yandell 2010-08-19 07:56:07

It's not working :( and it's giving aUncaught TypeError: Cannot call method 'each' of nullat start up :( Please do tell me how make this thing work. I have created a div and a paragraph with the id's count and status what else should I check? All my checkboxes are within a form tag. I don't know what else to do...

JohnRoach 2010-08-19 08:22:42

I’ve added the full, working HTML to the example so you can compare with the HTML you’re working with.

Todd Yandell 2010-08-19 08:31:57

Should there really be a call to `updateCount()` immediately before it is defined? This would result in the update code being executed before upon page load - the OP only wanted the update to occur when the first checkbox was clicked

belugabob 2010-08-19 08:42:14

The order of the call and define doesn’t matter much (see [here](http://stackoverflow.com/questions/261599/why-can-i-use-a-function-before-its-defined-in-javascript)). Also, the call *is* inside the ready handler, so it won’t occur until after the DOM is loaded. It’s actually a good idea to call it on ready, too. Consider coming back to the page using the back button — the checkboxes would be saved by the browser, so the count needs to be updated to reflect that.

Todd Yandell 2010-08-19 09:00:36

I think somehow my own scripts are crashing with yours. Is there a way to call the function as the checkbox is checked instead of relying of jQuery?

JohnRoach 2010-08-19 09:36:34

Ok I made it work. It seems there was indeed a conflict I changed the document ready part to:jQuery(document).ready(function($) {And added a <script type="text/javascript">jQuery.noConflict();</script> and it works like a charm :D thank you thank you thank you :D

JohnRoach 2010-08-19 11:02:55

Answer 2

A:

Try this:

var totalChecked        = 0;
$("input[type=checkbox]:checked").each(function(){
   totalChecked++;
});                                    
if(totalChecked > 0){
   $("div.display").css("display,block");
   $("div.display").text(totalChecked);
}else{
   $("div.display").css("display,none");
}

boss 2010-08-19 08:11:43

The div's id is "display" correct? if so nothing is showing up. can there be a reason for this?

JohnRoach 2010-08-19 08:45:32

ansaurus

tags:

views:

answers:

Count the number of checked check-boxes and display them on a fixed div using jQuery

related questions