Home/ Questions/Q 1004329
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T08:07:03+00:00

I’m trying to write a jQuery script (I have never written one before and

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0