Javascript 如何提交未选中的复选框也

若未选中复选框，则单击表单提交按钮不会提交任何数据

根据用户选择的表单字段，表单中可能不存在某些复选框。因此，submit controller无法确定表单中是否存在未选中的复选框

如果此列的数据库包含true，则此属性不会更新为false。 复选框名称与数据库布尔列名称相同

如何强制窗体将处于未选中状态的复选框或任何其他想法提交给 若未选中复选框，则将数据库中的值设置为false；若表单中不存在复选框，则不更改数据库中的值

---

使用jquery、jqueryui、asp.net 2 mvc这是HTML表单中复选框的常见问题，并且不是asp.net独有的

答案是每个复选框都有一个隐藏字段。修改复选框时，使用客户端事件更新隐藏字段

隐藏字段将始终提交

---

但是，由于您使用的是ASP.NET MVC，如果您使用

HTML.CheckBoxFor

帮助程序，它将自动为您处理此问题。

这是一个非常常见的问题-如果未选中复选框，它将不会自动发送到服务器值off/false。我发现的最流行的答案是添加与checkbox同名且value=false的隐藏字段。但当有人检查它时，它向我发送了两个值

我不喜欢它。这就是我所做的：

HTML中的某处：

<input type="checkbox" name="${name}" onclick="true" >

在JQuery中：

<input type="checkbox" name="${name}" onclick="true" >

第一步是在所有未选中的复选框上设置隐藏值

$(document).ready(function () {
        $(".checkbox").each(function () {
                 if ($(this).prop("checked") == undefined) {
                    $(this).after("<input type=\"hidden\" name=\"" + $(this).attr("name") + "\" value="off">")
                 }
              }
        )
     });

$（文档）.ready（函数（）{
$（“.checkbox”）。每个（函数（）{
if（$（this）.prop（“选中”）==未定义）{
$（此）。在（“”）之后
}
}
)
});

其次，我们必须在用户单击复选框时做出反应：当取消选择AddHiddenField时，当选择-RemoveNext sibling in DOM时，我们希望隐藏字段出现在那里

警告：当复选框具有公共父项时，应检查下一个同级的类型是否隐藏，然后将其删除！：

   $(".checkbox").click(function () {
                    if ($(this).prop("checked") == undefined) {
                       $(this).after("<input type=\"hidden\" name=\"" + $(this).attr("name") + "\" value=off>")
                    } else {
                       $(this).next().remove();
                    }
                 }
           );

$（“.checkbox”）。单击（函数（）{
if（$（this）.prop（“选中”）==未定义）{
$（此）。在（“”）之后
}否则{
$（this.next（）.remove（）；
}
}
);

---

它对我也有效：）

我的最短解决方案：使用复选框的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+'" />';

var htm=''；

---

提交只发送隐藏的同级，而不发送复选框，因为它没有name属性。因此，根据isMale值，上述内容被序列化为“…&Gender=1…”或“…&Gender=0…”。

我在使用jQuery/Java时遇到了类似问题-我没有使用额外的隐藏字段，而是在每次保存表单时强制提交，而不管字段是否被修改

e、 g.如果

chkBox1=unchecked

（将通过复选框的jQuery onClick或onChange事件发送空-控制值属性）

是屏幕上的值，我尝试保存数据，在Java代码中，我对getter中获得的值执行null检查，并将null解释为“N”。

---

这避免了隐藏字段的开销，尽管可以自由选择解决特定情况的解决方案。

我最近发现自己在这个问题上，这就是我的解决方案。 我做这件事没有隐藏的领域。 只需将复选框的“值”更改为“关闭”，并确保选中该复选框即可发送。 注意：我只针对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
        }
    })

---

我的表单是动态创建的，因此合并额外的隐藏字段会非常复杂。对我来说，它通过临时更改表单提交处理程序中的字段类型来工作

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"; });
        }
    }
});

---

这感觉有点脏，但对我的有效。

我知道这条线程很旧，几乎已经死了，但我也遇到了这个问题（是在2021年！）。我不得不从复选框中删除name属性作为我的工作

在razor页面代码中：

@model MyViewModel

@Html.LabelFor(model => model.MyCheckbox)
@Html.CheckBoxFor(model => model.MyCheckbox)
...
...
...
@* script tag at bottom of razor page *@
<script>
document.getElementById('MyCheckbox').removeAttribute('name');
document.getElementById('MyCheckbox').addEventListener('click', function() {
   // razor should create a hidden field with the name of the checkbox immediately 
   // after the checkbox.
   this.nextSibling.value = this.checked;
});
</script>

@model MyViewModel
@LabelFor（model=>model.MyCheckbox）
@Html.CheckBoxFor（model=>model.MyCheckbox）
...
...
...
@*页面底部的脚本标记*@
document.getElementById（'MyCheckbox'）。removeAttribute（'name'）；
document.getElementById（'MyCheckbox'）。addEventListener（'click'，function（））{
//razor应该立即创建一个带有复选框名称的隐藏字段
//在复选框后面。
this.nextSibling.value=this.checked；
});

---

复选框将不再被验证或提交，因为没有名称属性，但隐藏字段（与复选框同名）将被验证或提交。

@谢谢，这解决了问题。我正在asp.net MVC2中生成动态表单，类似于

void RenderFormField（StringBuilder sb）{switch（col.ColumnType）{case ColumnType.Boolean:sb.AppendFormat（“，col.PropertyName”）；sb.AppendFormat(“@Andrus，我建议您使用前面提到的
HTML.CheckBoxFor
创建一个常规视图，并复制生成的HTML（并确保捕获任何Javascript包含）。但是，作为一般规则，我会尽量避免以这种方式生成表单。如果您想调查其他选项，可能需要打开另一个问题，详细说明您试图实现的目标。祝您好运！为什么需要客户端事件？回答中写道，不需要更多内容，具有相同名称的隐藏元素就足够了，因为它将被删除rrridden always！？我认为你是对的，当复选框的名称和隐藏字段的名称相同时，它只是利用了一些行为。对于两个复选框，表单提交在post数据中返回“false，on”，如果复选框
@model MyViewModel

@Html.LabelFor(model => model.MyCheckbox)
@Html.CheckBoxFor(model => model.MyCheckbox)
...
...
...
@* script tag at bottom of razor page *@
<script>
document.getElementById('MyCheckbox').removeAttribute('name');
document.getElementById('MyCheckbox').addEventListener('click', function() {
   // razor should create a hidden field with the name of the checkbox immediately 
   // after the checkbox.
   this.nextSibling.value = this.checked;
});
</script>