使用 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="" />

Answer 1

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>