后并不包括所有的值

Question

我使用的是Node.js和玉石打，目前有这个简单的模板：

extends layout 

block content 
    h1 #{title} 
    br 

    form(action="/updateingredient", method="post") 
    table.table.table-striped.table-bordered 
     tr 
     td Name 
     td Category 
     td Available 
     if (typeof ingredients === "undefined") 
     tr 
      td 
     else 
     each ingredient in ingredients 
      tr 
      td #{ingredient.name} 
      td #{ingredient.category} 
      td 
       input(type="checkbox", name="#{ingredient.id}", 
       value="#{ingredient.available}", checked=ingredient.available) 
    button.btn(type="submit") Update Ingredients 

当提交这个我撞到在upgradeIngredients预期：

updateIngredient: function (req, res) { 
    console.log(req.body); 
} 

我的问题在于。邮局只包括已选中的复选框，而且复选框的值总是为false。我想这是因为那是Post Post之前的价值。

我最喜欢的是获取表单中的所有复选框值，选中或不选中。这可能吗？

从updateIngredient方法的电流输出给了我当一个复选框被选中以下（目前只是一个项目测试）：

{“b56a5f79-b074-4815-e7e0-4b746b2f65d8”：“假'}

并且当未选中：

{}

编辑

望着构建HTML我看到这一个项目：

<tr> 
    <td>Ost</td> 
    <td>Mælkeprodukt</td> 
    <td> 
     <input 
      type="checkbox" 
      name="b56a5f79-b074-4815-e7e0-4b746b2f65d8" 
      value="false" 
      checked="false"> 
    </td> 
</tr> 

Answer 1

验证复选框HTML是构建正确

• 看在控制台的错误和警告
• 确保这些框对于检查的值都具有“真”或“假”。

此示例包含工作语法：

Node Express Jade - Checkbox boolean value

Answer 2

更这里SO搜索一些后，我发现这个答案：Post the checkboxes that are unchecked

好像复选框，这是不检查不发布HTML时表单的一部分。这正是我所看到的。

在下另一条路径之前，我确实将检查过的代码更改为以下内容。

checked=ingredient.available?"checked":undefined 

这并没有改变任何东西，并没有给我任何数据在我的表单发布后未选中。

因此，我使用了JavaScript方法，向我的表单添加了一个提交事件处理程序。我在我的JavaScript文件夹中添加了一个新checkbox.js文件，这个代码是从this answer采取：

// Add an event listener on #form's submit action... 
$("#updateform").submit(
    function() { 

     // For each unchecked checkbox on the form... 
     $(this).find($("input:checkbox:not(:checked)")).each(
      // Create a hidden field with the same name as the checkbox and a value of 0 
      // You could just as easily use "off", "false", or whatever you want to get 
      // when the checkbox is empty. 
      function() { 
       console.log("hello"); 

       var input = $('<input />'); 
       input.attr('type', 'hidden'); 
       input.attr('name', $(this).attr("name")); // Same name as the checkbox 

       // append it to the form the checkbox is in just as it's being submitted 
       var form = $(this)[0].form; 
       $(form).append(input); 

      } // end function inside each() 
     );  // end each() argument list 

     return true; // Don't abort the form submit 

    } // end function inside submit() 
);  // end submit() argument list 

然后我说剧本到我的layout.jade文件的末尾：

script(src='/javascripts/checkbox.js') 

而且我修改的形式以包括ID：

form#updateform(action="/updateingredient", method="post") 

并除去从该复选框的值：

input(type="checkbox", name="#{ingredient.id}", 
    checked=ingredient.available?"checked":undefined) 

现在，我得到当值未选中以下：

{ 'b2a4b035-8371-e620-4626-5eb8959a36b0': '' } 

，并检查时：

{ 'b2a4b035-8371-e620-4626-5eb8959a36b0': 'on' } 

现在在我的方法，我可以找出它是否被选中或不：

var available = req.body[ingredient] === "on" ? true : false; 

其中ingredient是关键。