views:

43

answers:

2

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.

+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
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
I’ve added the full, working HTML to the example so you can compare with the HTML you’re working with.
Todd Yandell
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
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
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
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
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
The div's id is "display" correct? if so nothing is showing up. can there be a reason for this?
JohnRoach