使html复选框在序列化中发送真/假答案

【问题标题】：Make html checkbox send true / false in serialization使html复选框在序列化中发送真/假
【发布时间】：2017-06-01 17:49:47
【问题描述】：

我在表单中有以下复选框：

<input type="checkbox" name="preparationNeeded" >

这是通过 javascript 发送到 SpringController：

.ajax({
                        type : 'POST',
                        url : '${home}ui' + action + name + '.html',
                        data : $('#updateform').serialize(),
                        success : function(data) {
                            console.log("SUCCESS: ", data);
                            document.getElementById('viewmodal').style.display = 'none';
                            display(data);
                        },
                        error : function(e) {
                            console.log("ERROR: ", e);
                            displayError(e.responseText);
                        }
                    });

序列化如下：

选中时：

FORM:  id=1& ... preparationNeeded=true ...

未选中时（不包括复选框值）：

FORM:  id=1& ...

这被解析为具有布尔字段 Article.preparationNeded 的对象。这在几乎所有情况下都可以正常工作，但问题是 preparationNeeded 的默认值为 true。

因此，如果选中该复选框，则正确发送值 true。但是如果未选中该复选框，则该值不会被序列化并采用该字段的默认值，而不是 false。

一些建议：

How to change the value of a check box onClick using JQuery?

你也可以考虑引入隐藏输入

如果我在 value="false" 中包含隐藏值，则问题在未选中复选框时可以正常工作。但如果选中此项，则序列化如下：

FORM:  id=1& ... preparationNeeded=false&preparationNeeded=true ...

这会引发 org.springframework.validation.FieldError

Field error in object 'item' on field 'preparationNeeded': rejected value [false,true]; codes [typeMismatch.item.preparationNeeded,typeMismatch.preparationNeeded,typeMismatch.boolean,typeMismatch]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [item.preparationNeeded,preparationNeeded]; arguments []; default message [preparationNeeded]]; default message [Failed to convert property value of type [java.lang.String[]] to required type [boolean] for property 'preparationNeeded'; nested exception is java.lang.IllegalArgumentException: Invalid boolean value [false,true]]

因为值为 "false,true"

有什么建议吗？谢谢！

【问题讨论】：

标签： javascript html spring

【解决方案1】：

您可以将复选框的默认设置为false，这样当表单被解析为对象时，只有复选框被选中时才会为true。

如果您希望默认选中它以便用户不必单击它，您可以在页面加载时通过 JavaScript 手动选中该框。

【讨论】：

呵呵，是的。谢谢！

【解决方案2】：

您可以将复选框更改为虚拟名称，并将preparationNeeded设置为隐藏字段，并使用JS在每次更改复选框状态时适当地设置preparationNeeded的值。

【讨论】：

如果您也想这样做，您可以在虚拟复选框上指定一个属性，以便您可以使用 $('#updateForm :input[name!="preparationNeededDummy"]').serialize()将其排除在您提交的序列化表单数据之外。

【解决方案3】：

一个选项是观察复选框的点击，当复选框被选中时，清除隐藏输入上的名称。这样隐藏的输入值只会在未选中复选框时添加到序列化输出中。

请看下面的演示：

$(document).ready(function() {
  $('#serialize').click(serializeForm);
  $('#preparationNeededCheckbox').click(handleCheckboxClick);
});

function serializeForm() {
  console.log('serialized form: ',$('#updateform').serialize());
}

function handleCheckboxClick() {
  $('#hiddenCheckboxInput').attr('name', this.checked ? '' : this.name);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="updateform">
  Needs Preparation: <input type="checkbox" name="preparationNeeded" value="true" id="preparationNeededCheckbox" />
  <input type="hidden" name="preparationNeeded" value="false" id="hiddenCheckboxInput" />
</form>
<button id="serialize">Serialize</button>

但也许有两个单选按钮会更简单——一个代表真，一个代表假......

【讨论】：