Counting checkboxes on a form using Javascript

Question

I'm working on a form on a bespoke website (it's abit like a CMS just to explain the formatting of the HTML below so alot of it isn't relevant) and one of the things I've been requested to implement is to count how many of the checkboxes on the form have been ticked.

I've got checkbox1, checkbox2 and checkbox3 and a field called numberticked which I'm going to hide when it gets submitted (which I know how to do). If the user ticked checkbox1 it would write 1 to that numberticked field, if they ticked all 3 it would write 3 to that field and so on and so on (I'll be adding more checkboxes but I thought I'd start with 3 to test.)

I've had a read on the site but I'm not sure how to start on this one since it's a bespoke site, but it uses labels and ids and the form does work with Javascript so I'm hoping there's a general way to write a script to do it!

<div class="seq-box-form-field  editorcheckbox1  ">
  <label for="checkbox1">
    <span style="padding-right: 10px; vertical-align: 1px;">Checkbox 1</span>
    <input type="checkbox" name="checkboxcheckbox1" id="checkboxcheckbox1" />
    <input type="hidden" name="checkbox1" id="checkbox1" value="false" />
  </label>
  <script>
    $(document).ready(function() {
      $('#checkboxcheckbox1').click(function() {
        if ($('#checkboxcheckbox1').val() == 'true') {
          $('#checkbox1').val('false');
          $('#checkboxcheckbox1').val('false');
          $('#checkboxcheckbox1').prop('checked', false);
          $('#aspire_previewrefresh').trigger('click');
        } else {
          $('#checkbox1').val('true');
          $('#checkboxcheckbox1').val('true');
          $('#checkboxcheckbox1').prop('checked', true);
          $('#aspire_previewrefresh').trigger('click');
        };
      });
    });
  </script>
</div>
<div class="seq-box-form-field  editorcheckbox2  ">
  <label for="checkbox2">
    <span style="padding-right: 10px; vertical-align: 1px;">Checkbox 2</span>
    <input type="checkbox" name="checkboxcheckbox2" id="checkboxcheckbox2" />
    <input type="hidden" name="checkbox2" id="checkbox2" value="false" />
  </label>
  <script>
    $(document).ready(function() {
      $('#checkboxcheckbox2').click(function() {
        if ($('#checkboxcheckbox2').val() == 'true') {
          $('#checkbox2').val('false');
          $('#checkboxcheckbox2').val('false');
          $('#checkboxcheckbox2').prop('checked', false);
          $('#aspire_previewrefresh').trigger('click');
        } else {
          $('#checkbox2').val('true');
          $('#checkboxcheckbox2').val('true');
          $('#checkboxcheckbox2').prop('checked', true);
          $('#aspire_previewrefresh').trigger('click');
        };
      });
    });
  </script>
</div>
<div class="seq-box-form-field  editorcheckbox3  ">
  <label for="checkbox3">
    <span style="padding-right: 10px; vertical-align: 1px;">Checkbox 3</span>
    <input type="checkbox" name="checkboxcheckbox3" id="checkboxcheckbox3" />
    <input type="hidden" name="checkbox3" id="checkbox3" value="false" />
  </label>
  <script>
    $(document).ready(function() {
      $('#checkboxcheckbox3').click(function() {
        if ($('#checkboxcheckbox3').val() == 'true') {
          $('#checkbox3').val('false');
          $('#checkboxcheckbox3').val('false');
          $('#checkboxcheckbox3').prop('checked', false);
          $('#aspire_previewrefresh').trigger('click');
        } else {
          $('#checkbox3').val('true');
          $('#checkboxcheckbox3').val('true');
          $('#checkboxcheckbox3').prop('checked', true);
          $('#aspire_previewrefresh').trigger('click');
        };
      });
    });
  </script>
</div>
<div class="seq-box-form-field editornumberticked  ">
  <label for="numberticked">Number Ticked</label>
  <input id="numberticked" name="numberticked" placeholder="" type="text" onkeydown="if (event.keyCode == 13) { event.preventDefault(); return false; }" value="" />

so odd you would use a hidden input to store checkbox state. — epascarello, Sep 13 '22 at 16:42
`$('[type="checkbox"]').on("change", function () { console.log($('[type="checkbox"]:checked').length); });` — epascarello, Sep 13 '22 at 16:44
it does sound odd I know! But if numberticked says 1 then I've got a script to do something else on the page, if it says 3 then something else will happen... I know how to do that bit but it's getting the value of ticked into that field numberticked field for me to do something with that value! — Matthew, Sep 13 '22 at 16:49
No it is odd because there is no reason to store the checkbox state into a hidden field. — epascarello, Sep 13 '22 at 16:52
Yes there is and I explained my reason but thank you for your comment. — Matthew, Sep 13 '22 at 17:18
There is a lot of code and info here but I think the question is simply how to count the checked checkboxes? There are many answers here already: https://stackoverflow.com/questions/8011556/how-to-count-check-boxes-using-jquery, https://stackoverflow.com/questions/50235737/count-checked-checkboxes-with-jquery, https://stackoverflow.com/questions/45583710/how-to-get-the-total-count-of-checkboxes-of-based-on-particular-class, https://stackoverflow.com/questions/14725969/how-to-count-every-checked-checkboxes, ... — Don't Panic, Sep 15 '22 at 10:36
Does this answer your question? [How to count check-boxes using jQuery?](https://stackoverflow.com/questions/8011556/how-to-count-check-boxes-using-jquery) — Don't Panic, Sep 15 '22 at 10:36

score 0 · Answer 1 · answered Sep 13 '22 at 16:55

Here is an example of how to keep a text/hidden field's value updated to match the number of checkboxes currently checked.

$(() => {
  $('input:checkbox').change(() => {
    $('#count').val($('input:checkbox:checked').length);
  });
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
  <input type="checkbox" /> A<br/>
  <input type="checkbox" /> B<br/>
  <input type="checkbox" /> C<br/>
  <input type="text" id="count" value="0" />
</body>
</html>

that has worked a treat, thank you! – Matthew Sep 13 '22 at 17:36 — Matthew, Sep 13 '22 at 17:36

Counting checkboxes on a form using Javascript

1 Answers1