如何添加复选框以使用 jquery 提交表单？

Question

我正在使用 webflow 开发一个小网站，现在必须编写一点点自定义代码。为了简化和总结，我有一个在表单标签之外的复选框。我的目标是编写一些 javascript 代码的 jquery 来“捕获”表单标签外的复选框并将其添加到表单提交中。

这是我想出的，但它仍然无法正常工作。 你有什么想法吗？我对代码很陌生...谢谢:)

我想使用的脚本：（如果有意义？）

<script>

// defines the variable for the form
var form = document.getElementById("reservation");

// add the checkbox with the id of "outsider" to the form submission
document.getElementById("outsider").addEventListener("click", function () {
  form.submit();
});

</script>

编辑：我之前当然做了一些研究，但不能真正理解人们正在谈论的代码片段以及如何将脚本“链接”到我的表单的实际提交按钮。

对于现代浏览器：

var checkedValue = document.querySelector('.outsider:checked').value;

使用 jQuery：

var checkedValue = $('.outsider:checked').val();

纯javascript：

var checkedValue = null; 
    var inputElements = document.getElementsByClassName('outsider');
    for(var i=0; inputElements[i]; ++i){
          if(inputElements[i].checked){
               checkedValue = inputElements[i].value;
               break;
          }
    }

另一个 javascript： 再次，不确定如何将函数链接到我的提交按钮

CheckboxHandler.isChecked = function (checkboxObj) {
  return(checkboxObj.checked == true);
}; 

Answer 1

要添加复选框值，您可以添加 hidden 字段以保留 checkbox 的值，因此每当我们更新 checkbox 时，我们都会更新 hidden 字段，代码如下。

var humanizeCheckbox = ['outsider', 'without outsider'];

$('input[name="outsider"]').val(humanizeCheckbox[1]);

$('#check').on('click', function(){
  $('input[name="outsider"]').val($(this).is(':checked') ? humanizeCheckbox[0] : humanizeCheckbox[1])
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check" />
<form action='/' method="GET" >
  <input type="hidden" name="outsider" />
  <input type="text" name="email" />
  <input type="submit" value="Send" />
</form>

Answer 2

您可以将 jQuery 提交事件添加到您的 form:

$("#reservation").submit(function(evt) {
    //handleChecbox
    $("#inside").val($('.outsider:checked').val());
});

此功能将在您实际提交form 之前运行，但我建议将项目添加到form。