javascript 如何提交未选中的复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7600817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to submit unchecked checkbox also
提问by Andrus
If checkbox is not checked, clicking on form submit button does not submit any data.
如果未选中复选框，则单击表单提交按钮不会提交任何数据。
Some checkboxes may be not present in form depending on form fields selected by user. So submit controller has no possibility to determine if the unchecked checkbox was present in form or not.
根据用户选择的表单字段，某些复选框可能不会出现在表单中。因此提交控制器无法确定未选中的复选框是否存在于表单中。
If database contains true for this column, this property is not updated to false. Checkbox name is same as database boolean column name.
如果数据库包含此列的 true，则此属性不会更新为 false。复选框名称与数据库布尔列名称相同。
How to to force form to submit checkboxes which are in unchecked state or any other idea to set value in database to false if checkbox is not checked but not to change value in database if checkbox is not present in form ?
如果未选中复选框，如何强制表单提交处于未选中状态的复选框或任何其他想法将数据库中的值设置为 false，但如果表单中不存在复选框，则不更改数据库中的值？
jquery, jqueryui, asp.net 2 mvc are used
jquery, jqueryui, asp.net 2 mvc 使用
采纳答案by Steve Morgan
This is a common issue with checkboxes in HTML forms and isn't unique to ASP.NET.
这是 HTML 表单中复选框的常见问题，并非 ASP.NET 独有。
The answer is to have a hidden field that accompanies each checkbox. When the checkbox is modified, use a client-side event to update the hidden field.
答案是每个复选框都有一个隐藏字段。当复选框被修改时，使用客户端事件来更新隐藏字段。
The hidden field will always be submitted.
隐藏字段将始终提交。
However, since you're using ASP.NET MVC, if you use the HTML.CheckBoxForhelper, it will handle this for you automatically.
但是，由于您使用的是 ASP.NET MVC，如果您使用HTML.CheckBoxFor帮助程序，它会自动为您处理。
回答by Diaes
This is a very common problem - when checkbox isn't selected it wont send to server value off/ false by itself. Most popular answer that I found was to add hidden field with the same name as checkbox and value = false. But then when someone checked it it sent me two values.
这是一个非常常见的问题 - 当未选中复选框时，它不会自行发送到服务器值 off/false。我发现的最流行的答案是添加与复选框同名且值 = false 的隐藏字段。但是当有人检查它时，它向我发送了两个值。
And I didn't like it. This is what I did:
我不喜欢它。这就是我所做的：
Somewhere in HTML:
HTML 中的某处：
<input type="checkbox" name="${name}" onclick="true" >
In JQuery:
在 JQuery 中：
First step is to set hidden values on all checkboxes that aren't checked.
第一步是在所有未选中的复选框上设置隐藏值。
$(document).ready(function () {
$(".checkbox").each(function () {
if ($(this).prop("checked") == undefined) {
$(this).after("<input type=\"hidden\" name=\"" + $(this).attr("name") + "\" value="off">")
}
}
)
});
Secondly we have to react on user clicking the check-box: while unselecting add hidden field, when selecting - remove next sibling in DOM - we expected hidden field there.
其次，我们必须对用户单击复选框做出反应：在取消选择添加隐藏字段时，在选择时 - 删除 DOM 中的下一个兄弟 - 我们期望在那里隐藏字段。
WARNING: when check-boxes have common parent you should check if next sibling's type is hidden and then remove it!:
警告：当复选框具有共同的父级时，您应该检查下一个兄弟的类型是否隐藏，然后将其删除！：
$(".checkbox").click(function () {
if ($(this).prop("checked") == undefined) {
$(this).after("<input type=\"hidden\" name=\"" + $(this).attr("name") + "\" value=off>")
} else {
$(this).next().remove();
}
}
);
And it works for me :)
它对我有用:)
回答by MannyC
My shortest solution: use a checkbox's onchange() event to set a hidden sibling to 0 or 1. As follows:
我最短的解决方案：使用复选框的 onchange() 事件将隐藏的兄弟设置为 0 或 1。如下：
var htm = '<input type="checkbox" '+(isMale>0?"checked":"")+' onchange="this.nextSibling.value=this.checked==true?1:0;" /><input type="hidden" name="Gender" value="'+isMale+'" />';
Submit ONLY sends the hidden sibling, NOT the checkbox because it has no name attribute. So the above is serialized as "...&Gender=1..." or "...&Gender=0..." depending on isMale value.
提交仅发送隐藏的兄弟，而不是复选框，因为它没有名称属性。所以上面的序列化为 "...&Gender=1..." 或 "...&Gender=0..." 取决于 isMale 值。
回答by Kenny Ming
I found myself in this issue recently, and this is my solution. I do it without hidden field. Just change the 'value' of the checkbox to 'off', and make sure it is checked so it is sent. Note: I have only tested against a php server, but it should work.
我最近发现自己遇到了这个问题，这是我的解决方案。我没有隐藏字段。只需将复选框的“值”更改为“关闭”，并确保选中它以便发送。注意：我只对 php 服务器进行了测试，但它应该可以工作。
// Prepare checkboxes
var checkboxes = document.querySelectorAll('input[type="checkbox"]')
checkboxes.forEach(function(cbox) {
if (!cbox.checked) { // If the checkbox is checked it keeps its value, default value is 'on'
cbox.value='off' // Otherwise change the value to off, or something else
cbox.checked = true // We need to check it, so it sends the value
}
})
回答by Hauke
My form is created dynamically, so incorporating additional hidden fields would have been quite complicated. For me it works by temporarily altering the field type in a submit handler of the form.
我的表单是动态创建的，因此合并其他隐藏字段会非常复杂。对我来说，它通过临时更改表单提交处理程序中的字段类型来工作。
myForm.addEventHandler("submit", ev => {
for (let oField of ev.target.elements) {
if (oField.nodeName.toUpperCase() === "INPUT" &&
oField.type === "checkbox" &&
! oField.checked) {
oField.type = "text"; // input type text will be sent
// After submitting, reset type to checkbox
oReq.addEventListener("loadstart",
() => { oField.type = "checkbox"; });
}
}
});
This feels a bit dirty, but works for my.
这感觉有点脏，但对我有用。
回答by SPR
I ran into a similar issue while using jQuery/Java - Instead of using an additional hidden field, I forced a submission each time the form was saved irrespective of whether fields were modified.
我在使用 jQuery/Java 时遇到了类似的问题——我没有使用额外的隐藏字段，而是在每次保存表单时强制提交，而不管字段是否被修改。
e.g. If chkBox1 =unchecked(will send null - control value attribute via jQuery onClick or onChange event of checkbox)
例如，如果chkBox1 =unchecked（将通过 jQuery onClick 或复选框的 onChange 事件发送 null - 控件值属性）
<input name="chkBox1 " class="editable-value" id="chkBox1 " style="display: inline;" type="checkbox" data-type="A" data-original-value="checked" data-force-save="true" value="N"/>
and ChkBox2=checked(Will send Y)
和ChkBox2=checked（将发送 Y）
<input name="ChkBox2" class="editable-value" id="ChkBox2" type="checkbox" CHECKED="Y" data-type="A" data-original-value="checked" value="Y">
are the on screen values and I try to save the data,in my Java code I perform a null check on the value obtained in the getter and interpret a null as an 'N'. This avoids the overhead of a hidden field although one is free to choose the solution that addresses their particular situation.
是屏幕上的值，我尝试保存数据，在我的 Java 代码中，我对 getter 中获得的值执行空检查，并将空值解释为“N”。这避免了隐藏字段的开销，尽管人们可以自由选择解决其特定情况的解决方案。
