如何捕获复选框是否已被选中？

Question

我有一个用于网络研讨会注册的 Bootstrap 表单模式。我已经删除了其他字段，但我有多个文本字段正在被捕获并推送到 CMS。

只是这 3 个复选框，我似乎无法正确推送数据。如果表单提交一次，复选框将全部记录为“on”，但如果表单第二次提交，则选中/未选中的复选框将相应地推动“on”和“off”。所以它适用于第二次提交，但不适用于第一次。任何帮助将不胜感激。我是 javascript 和 jquery 的新手，所以我现在正在猜测。

$(document).ready(function() {
  $('.register-webinar').click(function() {
    checked = $("input[type=checkbox]:checked").length;

    if (!checked) {
      alert("You must select at least one session.");
      return false;
    }
  });

  $('input.webinar').change(function() {
    if ($(this).is(":checked")) {
      $(this).val("on")
    } else {
      $(this).val("off")
    }
  });

  $('#railway_form').on("submit", function(e) {
    e.preventDefault();
    setTimeout(AoProcessForm(this), 200);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

<div class="form-popup-bg">
  <div class="form-container">
    <button id="btnCloseForm" class="close-button">X</button>
    <h1 style="text-align:center;">Register your attendance</h1>
    <p style="text-align:center;">Please select which session/s you wish to attend.</p>
    <form name="railway_webinar" id="railway_form" class="railway_webinar" action="">
      <div class="form-group">
        <input type="checkbox" id="Webinar_1" name="Webinar_1" class="webinar">
        <label for="Webinar_1">webinar 1</label><br/>
        <input type="checkbox" id="Webinar_2" name="Webinar_2" class="webinar">
        <label for="Webinar_2">webinar 2</label><br/>
        <input type="checkbox" id="Webinar_3" name="Webinar_3" class="webinar">
        <label for="Webinar_3">webinar 3</label>
      </div>
      <input type="submit" value="Reserve my seat!" class="form-block-cta register-webinar" />
    </form>
  </div>
</div>

Answer 1

想通了。我需要做的就是将复选框值设置为“关闭”，因为默认情况下它们都是“打开”。