後並不包括所有的值

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是關鍵。