Question

我有一个表单/输入复选框，如下所示：

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

当我运行$("#the_form").serialize(); my_checkbox时，只有在检查时才会显示为真。如果未选中，则my_checkbox附带否数据。

有没有办法可以做到这一点，如果没有检查数据，它至少会给my_checkbox或其他东西一个空值？

Answer 1

这是来自网络浏览器的HTTP表单帖子的正常行为：未选中时不会显示复选框值，因为您可以根据它们的缺席推断出它们的值。

坦率地说，这可以通过简单的工程解决：呈现表单的代码知道复选框是否应该存在，因此接收帖子的代码也应该知道复选框应该存在并且可以隐式地确定正确的，未选中，复选框的值。

如果您要告诉我您的后端技术，我可以提供一些建议，说明如何设计表单数据集中未选中复选框的值。

如果您确实必须发布我认为不太理想的值，那么您可以添加一个隐藏的输入，该输入反映了您的复选框的值，并由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>

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

表格帖子会更大，使用更多带宽
可见元素与底层发布元素之间的简单对应关系被破坏，这是使用此代码的未来开发人员可能产生的混淆和错误。
对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;
}

未选中时，checkbox元素将从serialize（）中消失

2 个答案: