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

时间:2016-09-01 16:03:12

标签: javascript jquery html forms

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

我似乎无法让这个工作。这就是我所拥有的:

$('#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 {

  }
});

为什么这不起作用?

2 个答案:

答案 0 :(得分:3)

继续其他答案......

事件在表单上触发,因此:

$('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');
});

将在触发提交时触发。

假设HTML类似于:

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

答案 1 :(得分:1)

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

  

当用户尝试时,提交事件将发送到元素   提交表格。它只能附加到<form>元素

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

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

就我所知,上面回答了你的问题(即它说明了为什么它不起作用)。

这可能会改变:

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