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

Question

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

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

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

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

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

Bacause值为“false,true”

有什么建议吗？谢了！

Answer 1

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

请参见下面的演示：

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