Question

我正在玩node.js和jade，目前有这个简单的模板：

\n

提交时，我会按预期点击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

我的问题在于.Post仅包含已选中的复选框，复选框的值似乎也始终为updateIngredient: function (req, res) { console.log(req.body); }。我认为那是因为那是表格Post之前的值。

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

当选中复选框时，false方法的当前输出给出了以下内容（目前只测试一个项目）：

{＆＃39; b56a5f79-b074-4815-e7e0-4b746b2f65d8＆＃39;：＆＃39; false＆＃39; }

当取消选中时：

{}

修改

查看构造的HTML，我看到了一个项目：

updateIngredient

Answer 1

验证复选框HTML是否正确构建

在控制台中查找错误和警告
确保所有方框都有＆＃34; true＆＃34;或＆＃34;假＆＃34;检查值。

此示例包含工作语法：

Node Express Jade - Checkbox boolean value

Answer 2

在SO上搜索了更多内容之后，我找到了这个答案：Post the checkboxes that are unchecked

在发布HTML时，似乎未选中的复选框不是表单的一部分。这正是我所看到的。

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

checked=ingredient.available?"checked":undefined

这没有改变任何内容，并且在未经检查时没有在我的表单帖子中提供任何数据。

所以我使用了JavaScript方法，在表单中添加了一个提交事件处理程序。我在javascripts文件夹中添加了一个新的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是关键。

帖子不包含所有值

2 个答案: