强制复选框始终提交,即使未选中也是如此

Question

我有一个HTML表单,我希望总是有复选框来提交一个值.我怎样才能做到这一点？我有一个想法,但我没有尝试过,我不确定它是否是最好的方法(jquery检查框是否被选中,然后将值设置为0/1并检查它以便它将提交)

Answer 1

由于@Lazarus'的想法,也被提到@BalusC,你可以添加额外的控制形式:

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

复选框和隐藏字段必须具有相同的名称.隐藏输入始终作为默认值提交.如果选中该复选框,那么它也会被提交.因此,您有一个参数"checkbox1"的2个值列表,您必须在服务器端处理.

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

Answer 2

有一个合理的理由要求这样的事情,虽然这里设想的行为不是正确的方法.在编辑现有数据时正确使用复选框时出现问题,并且无法确定是否由于表单中没有字段或用户清除了所有值而未提交任何值.只要有条件地包含字段,就会遇到这类问题.

当然,人们可能会遇到维持"视图状态"的麻烦,但是每当复选框或具有多个选项的选项(在清除所有选择时也排除)时,包含隐藏的"伴随字段"要容易得多.显示.该字段应具有相关但不同的名称(可从中提取实际字段名称的名称).Lotus Domino服务器为此目的使用了名为%% Surrogate_FieldNameHere的字段,因为(我相信)版本7正是出于我在此描述的原因.

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

Answer 4

这完全违背了HTML中复选框的自然/指定行为。如果选中，则将其value作为参数发送。如果未选中，则不value会将其作为参数发送。在服务器端，您还如何区分已选中复选框和未选中复选框？请注意，如果value未指定，则大多数浏览器默认为“ on”。如果将所有复选框都设置为相同name但不同且固定，则更加容易value。这样，您可以将选中的作为数组/集合。

如果所有复选框都已在服务器端预先知道，则只需应用基本数学即可获得未选中的复选框：

uncheckedCheckboxes = allCheckboxes - checkedCheckboxes

这也是正常的做法。如果您更多地了解用于处理表单的服务器端语言，我们将为您提供更多技巧/窍门，以最佳方式实现这一目标。

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

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

此外，如果您只想更改单个表单的行为，只需更改上面代码片段中的第一行：

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