使用脚本创建隐藏的输入字段

I have a form with multiple checkboxes. When checked, the value will be "yes" when submitted. I am trying to find the best way to assign the value "no" to all unchecked checkboxes when the form is submitted.

我有一个包含多个复选框的表单。选中后，提交时该值将为“是”。我正在尝试找到在提交表单时为所有未选中的复选框分配值“no”的最佳方法。

I can't seem to get this to work. Here is what I have:

我似乎无法让这个工作。这是我有的：

$('#foo :checkbox').submit(function() {
  var $this = $(this);
  // $this will contain a reference to the checkbox   
  if ($this.is('not(:checked)')) {
    // the checkbox was not checked 
    var input = document.createElement("input");
    input.setAttribute("type", "hidden");
    input.setAttribute("name", $(this).attr("name"));
    input.setAttribute("value", "no");
    //append to form element that you want .
    document.getElementById("#foo").appendChild(input);
  } else {

  }
});

Why isn't this working?

为什么这不起作用？

2 个解决方案

#1

Following on from the other answer...

继其他答案之后......

The event is triggered on the form, so:

该事件在表单上触发，因此：

$('form').submit(function() {
    var $this = $(this);

    // Set checked inputs to value yes
    $this.find('input:checkbox:checked').attr('value', 'yes');

    // Set unchecked inputs to value no
    $this.find('input:checkbox:not(:checked)').attr('value', 'no');
});

will trigger when the submit is triggered.

触发提交时将触发。

Assuming the HTML is something like:

假设HTML是这样的：

<form>
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="submit" />
</form>

#2

From https://api.jquery.com/submit/

来自https://api.jquery.com/submit/

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to <form> elements

当用户尝试提交表单时，submit事件将发送到元素。它只能附加到

元素

So you can only attach the event to the form, not to the checkboxes.

因此，您只能将事件附加到表单，而不是复选框。

Which means that your code won't actually even run.

这意味着您的代码实际上甚至不会运行。

The above answers your question, as far as I can tell (ie it says why it doesn't work).

上面回答你的问题，据我所知（即它说明为什么它不起作用）。

Here is something that might work instead:

以下是可能有效的方法：

$('#foo').submit(function() {
  var $this = $(this);
  // $this will contain a reference to the form
  $this.find(':checkbox' ... // your code here

#1