Question

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

<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 将其解析为对象。这在几乎所有情况下都可以正常工作，但问题是 prepareNeded 的默认值为 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”

有什么建议吗？谢谢！

Answer 1

您可以将复选框的默认值设置为false，以便在将表单解析为对象时，只有选中该复选框才会为true。

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

Answer 2

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

Answer 3

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

见以下演示：

＆＃13;

$(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);
}

＆＃13;

<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>

＆＃13;

但也许有两个单选按钮可能更简单 - 一个用于真，一个用于假......

使html复选框在序列化中发送true / false

3 个答案: