Question

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

Answer 1

感谢@Lazarus' idea提及的@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">字段，以便服务器端知道哪些复选框都作为提交时刻出现。< / p>

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() {
    // ...
});

Answer 6

如果您有许多复选框，可以尝试以下代码：

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

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

注意：关于此代码的丑陋之处，在表单提交时，所有复选框都将显示为＆＃34;已选中＆＃34;一会儿。但是如果你为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');

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

7 个答案:

完整的解决方案