强制复选框始终提交，即使未选中

Posted 2023-05-08

【中文标题】强制复选框始终提交，即使未选中

【英文标题】：Force a checkbox to always submit, even when unchecked

【发布时间】：2011-04-14 09:14:26

【问题描述】：

我有一个 html 表单，我希望总是有复选框来提交一个值。我怎样才能做到这一点？我有一个想法，但我还没有尝试过，我不确定它是否是最好的方法（jquery 检查是否选中了该框，然后将值设置为 0/1 并将其选中，以便提交）

【问题讨论】：

是否有任何理由需要取消选中的复选框才能提交？似乎它相当多余，因为您可以通过 GET/POST 数据中的存在/不存在来检测复选框是否未被选中。如果不存在，则未检查。如果它在那里，它已被检查。很简单。

@Marc B：使用 asp.net 和 firefox，它看起来只有在检查时才会出现。

是的，这是正常行为。因此，您的服务器端脚本可以假设如果复选框的名称不存在于 get/post 数据中，则不会在客户端检查它。这比使用 javascript 操作提交的值更安全。

@Marc B：如果选中，则问题不存在。它是否以形式存在。因此我的问题。

【参考方案1】：

感谢@Lazarus' idea，也被@BalusC提到，您可以在表单中添加额外的控件：

<input type="hidden" name="checkbox1" value="off">
<input type="checkbox" name="checkbox1" value="on"> My checkbox

复选框和隐藏字段必须同名。隐藏的输入总是作为默认值提交。如果复选框被选中，那么它也被提交。所以你有一个参数“checkbox1”的2个值的列表，你必须在服务器端处理。

...也许<select> 标签会更方便。

【讨论】：

对未索引的数组无效，因为每个检查的元素最终都会有两个值。

@Pere 你不会总是只收到一个值吗？输入字段中的off（如果复选框已关闭）或复选框中覆盖的on？

【参考方案2】：

要求这样的事情是有正当理由的，尽管这里设想的行为不是正确的方法。正确使用复选框时存在问题在编辑现有数据时，这就是无法确定是否没有提交值是因为表单上不存在该字段还是因为用户清除了所有的值。有条件地包含字段时，您随时可能遇到此类问题。

当然，维护“视图状态”可能会遇到麻烦，但只要复选框或使用多个选项进行选择（当所有选择都被排除在清除）显示。该字段应具有相关但不同的名称（可以从中提取实际字段名称的名称）。自（我相信）版本 7 以来，Lotus Domino 服务器已出于此目的使用名为 %%Surrogate_FieldNameHere 的字段，这正是我在此处描述的原因。

【讨论】：

太棒了！观点。这正是我需要它的原因，无论它是否存在。

【参考方案3】：

说实话，这感觉像是一个很大的禁忌。

不管怎样：

<script type="text/javascript">
$(document).ready(function () 
    $('form').submit(function() 
        $(this).find('input[type=checkbox]').each(function () 
            $(this).attr('value', $(this).is(':checked') ? '1' : '0');
            $(this).attr('checked', true);
        );
    );
);
</script>

【讨论】：

正如@BalusC 所指出的，这与复选框行为的规范垂直。这种忍者调整就是重大错误的产生方式。

事实证明我无法使用它。提交时，您可以看到复选框被选中，这可能会吓坏一些人。

此解决方案将使用户在页面重新加载之前看到所有复选框都已选中。这会导致混乱。

【参考方案4】：

HTML 不是这样工作的。 HTML 复选框为specified，如下所示：如果选中，则其name=value 将作为请求参数发送。如果未选中，则其name=value 将不作为请求参数发送。请注意，当 value 未指定时，大多数浏览器默认为“开启”。如果您为所有复选框提供相同的name，但使用不同且固定的value，会更容易。这样您就可以将选中的作为数组/集合获取。

如果所有复选框在服务器端都是预先知道的，您可以应用基本数学来获得未选中的复选框：

uncheckedCheckboxes = allCheckboxes - checkedCheckboxes

如果这些复选框是在客户端动态创建的，因此在服务器端事先未知，则为每个复选框添加一个 <input type="hidden"> 字段，其中包含有关动态创建的复选框的信息，以便服务器端知道哪些复选框都存在作为提交的时刻。

【讨论】：

“既然您事先已经知道哪些复选框都在 HTML 页面中”

嗯，如果选中复选框，我会得到两个值，不是吗？上面的解决方案已经奏效了。

不，只是有关“复选框”的信息。视图的状态应该在服务器端是已知的。确实，vassalis 的解决方案有效，但它实际上不是解决方案，它是一种解决方法/hack。如果您的代码将被其他人解耦、重用和/或维护，他们会因为不直观的行为而解雇您。

vassilis 工作，但您可以看到复选框被选中，因此可能会吓坏 ppl。所以我创建了您的解决方案，这实际上是一个好主意。但我只在复选框关闭时创建输入。问题是当我回击时我需要删除它，否则我会得到多个值。所以我现在正在弄清楚。

没有必要像那样添加/删除它们。您也可以将它们保留为“所有复选框”，并将选中复选框的值用作“选中复选框”。在提交处理期间，您可以从中提取“未选中的复选框”。

【参考方案5】：

虽然这违反了 HTML 规范，但如果您知道自己在做什么，使用它您不再需要处理提交时处理完全不同的复选框 - 例如命名字段 with_brackets[] 实际上可以使用。

完整的解决方案

$(document).on('submit', 'form', function() 
    $(this).find('input[type=checkbox]').each(function() 
        var checkbox = $(this);

        // add a hidden field with the same name before the checkbox with value = 0
        if ( !checkbox.prop('checked') ) 
            checkbox.clone()
                .prop('type', 'hidden')
                .val(0)
                .insertBefore(checkbox);
        
    );
);

注意：未选中的复选框现在提交的值为"0"

---

另外，如果你只想改变单个表单的行为，只需修改上面sn-p中的第一行：

$(document).on('submit', 'form.your-class-name', function() 
    // ...
);

【讨论】：

我很确定反对意见的作者之一是反对意见的作者，感谢公平竞争。

【参考方案6】：

如果你有很多复选框，你可以试试这个代码：

<input type="checkbox" onclick="$(this).next().val(this.checked?1:0)"/> <input type="hidden" name="checkbox1[]"/>

【参考方案7】：

如果您有以下 HTML：

<form id="myform" method="post" action="my/url">
    <input type="checkbox" id="checkbox1" name="checkbox1"/>
    <input type="checkbox" id="checkbox2" name="checkbox2"/>
    <input type="checkbox" id="checkbox3" name="checkbox3"/>
</form>

普通表单提交：

在提交表单时，在提交之前，根据复选框是未选中还是选中，将复选框的所有值更改为 0 和 1。像这样：

$('#myform').submit(function() 
    var $checkboxes = $('#myform').find('input[type="checkbox"]');// Select all checkboxes
    $checkboxes.filter(':checked').val(1);// Set value to 1 for checked checkboxes
    $checkboxes.not(':checked').val(0);// Set value to 0 for unchecked checkboxes
    $checkboxes.prop('checked', true);// Change all checkboxes to "checked" so all of them are submitted to server
);

注意：这段代码的丑陋之处在于，在提交表单时，所有复选框都会暂时显示为“已选中”。但是如果你对ajax表单提交应用相同的概念，那就更好了。

AJAX 表单提交：

$.post('my/url', 
    'checkbox1': $('#checkbox1').is(':checked') ? 1 : 0,
    'checkbox2': $('#checkbox2').is(':checked') ? 1 : 0,
    'checkbox3': $('#checkbox3').is(':checked') ? 1 : 0
, function(response) 
    // Server JSON response..
, 'json');