jquery - 我该怎么做才能为 html 5 表单创建一个较旧的浏览器、向后兼容的 jquery 解决方案？

Question

HTML 5 让生活更轻松，但不幸的是它不适用于旧版浏览器。我有一个可以在任何使用 HTML 5 的现代浏览器中正常工作的表单，但我需要一个仍然与旧浏览器兼容的解决方案：

<p>
<input name="array[]" type="checkbox" value="a1" form="myform" class="checkbox"/> a1<br />
<input name="array[]" type="checkbox" value="b1" form="myform" class="checkbox"/> b1<br />
<input name="array[]" type="checkbox" value="c1" form="myform" class="checkbox"/> c1<br />
</p>

<form id="myform" method="POST" action="test.php">
  <input type="submit" value="Send" />
</form>

复选框的数量是动态生成的，不能放入任何表单标签中。我需要在提交时使用“myform”表单传递复选框值。上面的示例适用于 html 5 浏览器，但不适用于旧版浏览器。

我怎样才能使它适用于较旧的浏览器，例如 IE 7 等？

可以用 jQuery 完成吗？有什么建议么？

Answer 1

您可以创建隐藏输入并使用复选框中的当前值，然后在使用 jQuery 提交表单之前将它们添加到表单中，如下所示：

$('#myform').on('submit', function (e) {
    $form = $(this);

    $('input[type=checkbox]:checked').each(function (index, elem) {
        var val = $(elem).val(),
            name = $(elem).attr('name');

        var hiddenInput = $('<input type="hidden" value="' + val + '" name="' + name + '"/>');
        $form.append(hiddenInput);
    });
});