Question

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

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

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

如何强制表单提交处于未选中状态或任何其他想法的复选框如果未选中复选框，则将数据库中的值设置为false，但如果表单中没有复选框，则不会更改数据库中的值？

使用jquery，jqueryui，asp.net 2 mvc

Answer 1

这是HTML表单中复选框的常见问题，并非ASP.NET独有。

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

隐藏字段将始终提交。

但是，由于您使用的是ASP.NET MVC，如果您使用HTML.CheckBoxFor帮助程序，它将自动为您处理。

Answer 2

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

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

HTML中的某个地方：

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

在JQuery中：

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

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

其次我们必须对用户点击复选框做出反应：当取消选择添加隐藏字段时，选择 - 删除DOM中的下一个兄弟 - 我们期望隐藏字段。

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

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

它适用于我：）

Answer 3

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

提交仅发送隐藏的兄弟，而不是复选框，因为它没有名称属性。所以上面的序列化为＆＃34; ...＆amp; Gender = 1 ...＆＃34;或＆＃34; ...＆amp;性别= 0 ...＆＃34;取决于isMale值。

Answer 4

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

Answer 5

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

e.g。如果chkBox1 =unchecked（将通过jQuery onClick或onChange事件复选框发送null - control value属性）

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

和ChkBox2=checked（将发送Y）

<input name="ChkBox2" class="editable-value" id="ChkBox2" type="checkbox" CHECKED="Y" data-type="A" data-original-value="checked" value="Y">

是屏幕上的值，我尝试保存数据，在我的Java代码中，我对getter中获得的值执行空检查，并将null解释为'N'。这可以避免隐藏字段的开销，尽管可以自由选择解决其特定情况的解决方案。

Answer 6

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

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

这有点脏，但是对我有用。

Answer 7

我知道这个帖子很旧而且几乎死了，但是，我也遇到了这个问题（是的，2021 年！）。我不得不从复选框中删除 name 属性作为我的解决方法。

在您的剃刀页面代码中：

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

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

如何提交未选中的复选框

7 个答案: