复选框元素在未选中时从 serialize() 中消失

Question

我有一个 form/input 复选框，如下所示：

<form id="the_form">
    <input name="my_checkbox" type="checkbox" value='true' />
</form>

When I 运行 a $("#the_form").serialize(); my_checkbox 只有在检查时才会出现。如果不勾选，则有没有数据my_checkbox.

有什么方法可以让我在不检查数据的情况下至少给 my_checkbox 或其他东西一个空值？

Answer 1

这是来自 Web 浏览器的 HTTP 表单 posts 的正常行为：未选中时不会显示复选框值，因为您可以从它们的缺失推断出它们的值。

坦率地说，这可以通过简单的工程来解决：显示表单的代码知道复选框是否应该存在，所以接收 post 的代码也应该知道复选框应该存在并且可以隐式确定复选框的正确、未选中值。

如果您能告诉我您的后端技术，我或许可以提供一些想法，告诉您如何设计表单数据集合中未选中复选框的值的存在。

如果您确实必须拥有值 posted，我认为这不太理想，那么您可以添加一个隐藏的输入来反映复选框的值，并由 JavaScript 更新:

<form id="the_form">
    <input id="my_checkbox_ui" name="my_checkbox_ui" type="checkbox" value='true' />
    <input id="my_checkbox" name="my_checkbox" type="hidden" value='true' />
</form>
<script>
   $(document).ready(function () {
      $('#my_checkbox_ui').change(function () {
         $('#my_checkbox').val($(this).val());
      });
   });
</script>

请记住，在并非绝对需要时执行此操作会增加额外的复杂性并产生较差的系统：

表单post会更大，使用更多带宽
可见元素和基础 posted 元素之间的简单对应关系被破坏，这可能是未来使用此代码的开发人员混淆和错误的根源。
JavaScript 的需要会增加可能破损的表面积——有更多的移动部件可能会破损，这会导致脆弱。
与前两点相关，如果有人复制该表单并尝试在其他代码中使用它，即使 UI 看起来可以正常工作，它也不会正常工作。

另一种可能解决此问题的方法是使用 javascript:

半不显眼地注入复选框阴影元素

<form id="the_form">
    <input id="my_checkbox_ui" name="my_checkbox_ui" type="checkbox" value='true' />
    <input id="my_checkbox" name="my_checkbox" type="hidden" value='true' />
</form>
<script>
   function getShadowFn(id, shadowId) {
      return function() {
         $('#' + shadowId).val($('#' + id).val());
      };
   }

   function convertCheckboxesToAlwaysPostingCheckboxes() {
      $('input[type="checkbox"]').each(function(id, el) {
         var $el = $(el);
         var name = $el.prop('name');
         var id = $el.prop('id');
         var shadowId = id + '_shadow'
         $el.prop('name', name + '_ui');
         $('<input type="hidden" id="' + shadowId + '" name="' + name + '">')
            .insertAfter($el);
         $el.change(getShadowFn(id, shadowId));
      });
   }

   $(document).ready(convertCheckboxesToAlwaysPostingCheckboxes);
</script>

这仍然增加了复杂性，但它不那么脆弱了，因为它不再特定于任何复选框，现在所有的复选框都将仅使用这一点代码就可以正常工作（尽管我没有在所有，所以请把它当作灵感而不是处方）。所以你可以让这段代码正常工作，然后一遍又一遍地使用它。

Answer 2

我通过 javascript 提交了我的复选框，并且由于我在后端解析了很多信息，并且我的脚本查找了这些变量，所以在表单已提交。

感谢所有给我指导的人，但我想出了一个解决这个问题的方法，没有太多繁重的工作。

function submitForm()
{
    //serialize all the inputs in the form
    var data_serialize = $("#the_form").serialize();

    //check to see if any checkbox's are not checked, and if so, make them false
    $("#the_form input:checkbox:not(:checked)").each(function(e){ 
          data_serialize += "&"+this.name+'=false';
    });

    //submit the form
    var url = "/submit";
    $.ajax({ type: "POST", url: url, data: data_serialize,
        success: function(data) {  },
        error: function(data) {  }
    });
    return false;
}

复选框元素在未选中时从 serialize() 中消失

Checkbox element disappears from serialize() when not checked

javascript

jquery

javascriptserializer