更新时间:2023-11-24 15:38:16
.append()
需要文本 HTML 作为输入.您已经传递了 #reservation
的 id
选择器.要在 submit
事件中有效地将复选框添加到 form
,您可以这样做:
.append()
expects textual HTML as input. You have passed the id
selector of #reservation
instead. To effectively add the checkboxes to the form
in the submit
event you could do this:
// wait for DOM to be ready
$( document ).ready(function() {
//define the variable for all checkboxes on the page
var allCheckboxes = $("input:checkbox[class=outsider]");
//calls the append function on form submission
$("#form-element").submit(function(event) {
//insert all checkbox type elements into the form with id="form-element"
var checkHTML = "";
for(var checkboxIndex = 0; checkboxIndex < allCheckboxes.length; checkboxIndex++) {
checkHTML += allCheckboxes[checkboxIndex].outerHTML;
}
$("#form-element").append(checkHTML);
});
});
但是,您的意图很可能与行为不同.代码问题:
However, it is highly probable that your intention differs from the behavior. Problems with the code:
处理所有这些问题的代码:
Code dealing with all these problems:
// wait for DOM to be ready
$( document ).ready(function() {
//define the variable for all checkboxes on the page
var allCheckboxes = $("input:checkbox[class=outsider]");
//calls the append function on form submission
$("#form-element").submit(function(event) {
//insert all checkbox type elements into the form with id="form-element"
var checkHTML = "";
var checked = [];
for(var checkboxIndex = 0; checkboxIndex < allCheckboxes.length; checkboxIndex++) {
checked.push($(allCheckboxes[checkboxIndex]).prop('checked'));
allCheckboxes[checkboxIndex].remove();
checkHTML += allCheckboxes[checkboxIndex].outerHTML;
}
$("#form-element").append(checkHTML);
allCheckboxes = $('input:checkbox[class=outsider]');
console.log(checked);
for (var checkboxIndex = 0; checkboxIndex < allCheckboxes.length; checkboxIndex++) {
$(allCheckboxes[checkboxIndex]).prop('checked', checked[checkboxIndex]);
}
event.preventDefault();
});
});
因此,如果您处理了所有问题,则可以通过克隆复选框来解决问题.或者,您可以使用 hidden
input
在其中放置键值对,其中键将是 checkbox
ids,值将是它们的相应的 checked
状态并将这些值放入 hidden
input
在 submit
处理程序中.如果您不打算直观地将复选框放入表单中并且您对正确处理数据感到满意,那么将键值对的 JSON 值放入一个 hidden 的
value
input
与将复选框复制到 form
相比要优越得多,但这只是细微差别.
So you can solve your problem by cloning the checkboxes if you handle all the problems. Alternatively, you could use a hidden
input
where you could put key-value pairs, where the keys will be checkbox
ids and values will be their corresponding checked
states and put those values into the hidden
input
at the submit
handler. If you do not specifically intend to visually put the checkboxes into the form and you are satisfied with correct handling of data, then putting the JSON value of key-value pairs into the value
of a hidden
input
is superior in comparison of copying checkboxes into the form
, but these are only nuances.