javascript 如何提交未选中的复选框

um6iljoc  于 2023-02-02  发布在  Java
关注(0)|答案(8)|浏览(229)

如果未选中复选框,则单击表单提交按钮不会提交任何数据。
根据用户选择的表单域,某些复选框可能不存在于表单中。因此提交控制器无法确定未选中的复选框是否存在于表单中。
如果数据库中此列包含true,则此属性不会更新为false。复选框名称与数据库布尔列名相同。
如何强制表单提交处于未选中状态的复选框,或者如果复选框未选中,则将数据库中的值设置为false,但如果表单中不存在复选框,则不更改数据库中的值?
使用了jquery、jqueryui、asp.net2个mvc

ut6juiuv

ut6juiuv1#

这是HTML表单中复选框的常见问题,并非ASP.NET所独有。
答案是每个复选框都有一个隐藏字段,当复选框被修改时,使用客户端事件来更新隐藏字段。
隐藏字段将始终提交。
但是,由于您使用的是ASP.NETMVC,如果您使用HTML.CheckBoxFor帮助器,它将自动为您处理此问题。

yzckvree

yzckvree2#

这是一个很常见的问题-当复选框没有被选中时,它不会自己发送off/false值到服务器。我发现最流行的答案是添加与复选框同名的隐藏字段和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">")
                 }
              }
        )
     });

其次,我们必须对用户点击复选框作出React:当取消选择添加隐藏字段时,当选择-删除DOM中的下一个兄弟时-我们期望隐藏字段在那里。

    • 警告**:当复选框有公共父项时,应检查下一个同级的类型是否隐藏,然后将其删除!:
$(".checkbox").click(function () {
                    if ($(this).prop("checked") == undefined) {
                       $(this).after("<input type=\"hidden\" name=\"" + $(this).attr("name") + "\" value=off>")
                    } else {
                       $(this).next().remove();
                    }
                 }
           );

而且对我很有效:)

5jdjgkvh

5jdjgkvh3#

我的最短解决方案:使用复选框的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只发送隐藏的同级,而不是复选框,因为它没有name属性。因此,根据isMale值,上述内容被序列化为“...&Gender=1...”或“...&Gender=0...”。

clj7thdc

clj7thdc4#

我发现自己最近遇到了这个问题,这是我的解决方案。我没有隐藏字段。只需将复选框的“值”更改为“关闭”,并确保选中它,以便发送。注意:我只测试了一个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
        }
    })
cczfrluj

cczfrluj5#

我在使用jQuery/Java时遇到了类似的问题-a我没有使用额外的隐藏字段,而是在每次保存表单时强制提交,而不管字段是否被修改。
例如,如果chkBox1 =unchecked(将通过复选框的jQuery onClick或onChange事件发送空控件值属性)

<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中获得的值执行空值检查,并将空值解释为“N”。这避免了隐藏字段的开销,尽管可以自由选择解决其特定情况的解决方案。

u1ehiz5o

u1ehiz5o6#

我的表单是动态创建的,所以合并额外的隐藏字段会相当复杂。对我来说,它的工作原理是临时改变表单提交处理程序中的字段类型。

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

这感觉有点脏,但对我很有效。

erhoui1w

erhoui1w7#

我知道这个线程是旧的,几乎死了,但我遇到了这个问题,以及(是在2021年!)我不得不删除名称属性从复选框作为我的工作。
在您的剃刀页面代码中:

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

复选框将不再得到验证或提交,因为没有name属性,但隐藏字段(与复选框具有相同的名称)将得到验证或提交。

vfhzx4xs

vfhzx4xs8#

我知道这是一个老问题,但也许有人喜欢一个解决方案喜欢这样:

<form action="<your url>" method="get" onsubmit="return setupSearch();">
<input
    id="cache"
    name="cache"
    type="checkbox"
    style="display: none" />
<input
    id="archive"
    name="archive"
    type="checkbox" />

Javascript函数:

function setupSearch() {
    document.getElementById("cache").checked = !document.getElementById("archive").checked;
    return true;
}

因此,您将在查询字符串中获得以下值:

?cache=on

或者只是

?archive=on

相关问题