使用 "Check All" 按钮提交复选框并清除验证错误

Question

通过多次试验和错误（主要是错误），我设法合并了 jQuery 验证、Bootstrap 3（使用 Popover 验证消息）和 DataTables 来创建我怀疑一个相当常见的场景：

一个包含一列复选框的 DataTable，并提供一个 "check all" 复选框，用于选择 DataTable 中跨分页和筛选的所有复选框，并应用 jQuery 验证以确保用户不会不至少选中一个复选框就提交。

这里有一个 link 我正在做的活生生的例子：http://live.datatables.net/lomelono/2/

它有效（脚本选取所有选中的复选框（通过选中所有复选框，或者如果手动选择，并在数据表上进行分页和过滤），如果没有选中复选框，将进行验证。

它没有做的是：

如果选中了“全部选中”复选框，则清除验证错误

使用 .appendTo() 确保选中 pagination/filtering 中所有选中的复选框以提交的另一个奇怪的副作用是所有复选框（选中或未选中）将在提交前显示在表单底部（示例中禁用了提交，因此您可以看到行为）。

显然我只知道 jQuery 是危险的，但是有没有更好的方法来提交所有选中的复选框，并确保客户端验证正常工作？当然，我有一个服务器端问题，但理想情况下我们希望在用户提交之前通知他们。

我想我真的快要解决这个问题了，希望有人能指出我的终点线，这有望让其他遇到这种或类似情况的人受益。

Answer 1

解决方案

您可能需要在提交表单时将 DOM 中不存在的 <input type="checkbox"> 变成 <input type="hidden">。

例如：

$("#emailCompose").validate({
    submitHandler: function(form) {

       // Iterate over all checkboxes in the table
       table.$('input[type="checkbox"]').each(function(){
          // If checkbox doesn't exist in DOM
          if(!$.contains(document, this)){
             // If checkbox is checked
             if(this.checked){
                // Create a hidden element 
                $(form).append(
                   $('<input>')
                      .attr('type', 'hidden')
                      .attr('name', this.name)
                      .val(this.value)
                );
             }
          } 
       });          
    //form.submit();
    },

    // ... skipped ...
});

演示

有关详细信息和演示，请参阅 jQuery DataTables: How to submit all pages form data。

使用 "Check All" 按钮提交复选框并清除验证错误

Submit checkboxes with "Check All" button and clear validation error

datatables

jquery-validate

popover

twitter-bootstrap-3

datatables-1.10

解决方案

演示