4

I'm trying to write a jQuery script (I have never written one before and I need help). The details are as following; I have a form with check-boxes. Each check-box has a different id and name which I will need for my own programming reasons. What I simply want is to count the number of check-boxes and simply display it on the right side in a fixed div. The div must only be shown after the first checkbox is ticked. How can I do this? My example check-box is : 

<input type="checkbox" name="check_box_no_2" id="check_box_no_2" value="some_important_value">

The check-box name is incremental. Meaning the next one will be check_box_no_3. Please help...

So far I have been fiddling with 

$("input[type=checkbox][checked]").each( 
    function() { 
       // Insert code here 
    } 
);

but this seems not to be working with FireFox.

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
JohnRoach
  • 747
  • 4
  • 11
  • 26

2 Answers2

9

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
  • 14,656
  • 2
  • 50
  • 37
  • It's not working :( and it's giving a Uncaught TypeError: Cannot call method 'each' of null at 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 Aug 19 '10 at 08:22
  • I’ve added the full, working HTML to the example so you can compare with the HTML you’re working with. – Todd Yandell Aug 19 '10 at 08:31
  • 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 Aug 19 '10 at 08:42
  • 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 Aug 19 '10 at 09:00
  • 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 Aug 19 '10 at 09:36
  • 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 and it works like a charm :D thank you thank you thank you :D – JohnRoach Aug 19 '10 at 11:02
0

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");
}
Murugesh
  • 820
  • 2
  • 12
  • 24