ポストは

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の前の値だったからだと推測します。

私が好きなのは、フォーム内のすべてのチェックボックスの値をチェックするかどうかです。これは可能ですか？

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は、エラーと警告のためのコンソールで

• を見て、正しく構成されていることを確認します
• チェックボックスの値がすべて「true」または「false」であることを確認します。

この例では、作業の構文含まれています。もっとここにSOの一部を検索した後

Node Express Jade - Checkbox boolean value

Answer 2

を、私はこの答えが見つかりました：Post the checkboxes that are unchecked

それは、チェックボックスのように思える、チェックされないではありませんHTMLを投稿するときのフォームの一部。これはまさに私が見ているものです。

私はチェックコードを次のように変更して別のパスを終了しました。

checked=ingredient.available?"checked":undefined 

これは何も変更せず、オフにするとき私に私のフォームポスト内の任意のデータを与えていません。

私はフォームにサブミットイベントハンドラを追加してJavaScriptのアプローチを使用しました。私はこのコードがthis answerから取られ、私のJavaScriptフォルダに新しいcheckbox.jsファイルを追加しました：

// 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') 

そして、私は自分のフォームを修正しました

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

チェックボックスから値を削除：

をIDを含めるには

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が鍵です。