当前位置: 首页 > 知识库问答 >
问题:

如何从jQuery数据表中的所有页面中选择所有复选框

敖子安
2023-03-14

我使用jQuery Datatables插件来显示数据。它提供分页、搜索、排序等功能,所以每次我只在当前页面上显示10条记录。如果我点击next或page number(由Bootstrap Datatable提供),将显示另外10条记录。正如问题中提到的,我想从所有页面中选择所有复选框。

$(document).ready(function () {
   $('body').on('click', '#selectAll', function () {
      if ($(this).hasClass('allChecked')) {
         $('input[type="checkbox"]', '#example').prop('checked', false);
      } else {
       $('input[type="checkbox"]', '#example').prop('checked', true);
       }
       $(this).toggleClass('allChecked');
     })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>monitoring</title>
        <script src="jquery.js"></script>
         </head>
        <body>
        <table id="example" class="myclass">
        <thead>
        <tr>
         <th>
          <button type="button" id="selectAll" class="main">
          <span class="sub"></span> Select </button></th>
        	<th>Name</th>
        	<th>Company</th>
        	<th>Employee Type</th>
        	<th>Address</th>
        	<th>Country</th>
        </tr>
        </thead>
        <tbody>
        										  
        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>varun</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Rahuk</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>johm Doe</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Sam</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Lara</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Jay</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>

        <tr>
        <td><input type="checkbox"/>
        </td>
        <td>Tom</td>
        <td>TCS</td>
        <td>IT</td>
        <td>San Francisco</td>
        <td>US</td>
        </tr>
        																								
        </tbody>
        </table>
        				
        </body>
        </html>

共有1个答案

慕承允
2023-03-14

请尝试以下代码:

$(document).ready(function () { 
    var oTable = $('#example').dataTable({
        stateSave: true
    });

    var allPages = oTable.fnGetNodes();

    $('body').on('click', '#selectAll', function () {
        if ($(this).hasClass('allChecked')) {
            $('input[type="checkbox"]', allPages).prop('checked', false);
        } else {
            $('input[type="checkbox"]', allPages).prop('checked', true);
        }
        $(this).toggleClass('allChecked');
    })
});

fnGetNodes()中应该会有神奇的效果:

fnGetNodes():获取表体中使用的TR节点的数组

$(document).ready(function () { 
    var oTable = $('#example').dataTable({
        stateSave: true
    });

    var allPages = oTable.cells( ).nodes( );

    $('#selectAll').click(function () {
        if ($(this).hasClass('allChecked')) {
            $(allPages).find('input[type="checkbox"]').prop('checked', false);
        } else {
            $(allPages).find('input[type="checkbox"]').prop('checked', true);
        }
        $(this).toggleClass('allChecked');
    })
});    
 类似资料:
  • 我需要在datatable分页中选中所有复选框我做错了什么 现在我只能得到一个页面复选框值。

  • 我有一个jQuery datatable,最多有1000个条目。我每页显示5个这样的条目,但当然,一个可以搜索和容易地得到记录,一个正在寻找,或者一个可以使用下一步按钮到下一个页面。 我将复选框附加到DataTable中的每一行。我的问题是,当我检查一个页面中的某些行,然后移动到另一个页面并检查其他行,然后将表单提交给某个PHP处理程序时,它只发送最后一个页面中被检查的行。它不会发送我在前几页中检

  • 问题内容: 我需要有关jQuery选择器的帮助。假设我有一个标记,如下所示: 除了用户单击时,如何获取所有复选框? 问题答案: 一个更完整的示例适用于您的情况: 当被点击复选框,该复选框的状态进行检查,并在当前形式的所有复选框被设置为相同的状态。 请注意,您无需从选择中排除该复选框,因为该复选框的状态将与其他所有复选框相同。如果出于某些原因确实需要排除,则可以使用以下方法:

  • 我在index.php中有以下javascript代码: 我通过ajax检索信息,并使用jQuery数据表从该信息创建一个表,在数据表中,我有一个复选框。

  • 我有一个超文本标记语言选择框,在我的jsp中启用了多选择。我从其他按钮动态填充选项。因此,用户不会从该选择框中选择任何值。我必须将selectbox的所有值传递给其他jsp。 我正在使用表单操作提交浏览jsp。这样做时,我无法获得所有的选择框值。 此选项仅提供该多选框中的选定值。我想要的是从selectbox中获取所有值,无论是否选中。 谢谢

  • 我正在使用datatable创建一个可排序、可搜索、可分页的表,表中的行是load serverside,我在每一行中添加了一个复选框,在表头中添加了一个check all复选框,我编写了一个自定义jquery函数来检查复选框的所有行,下面是我的代码: 问题是我的自定义检查全部功能无法检查数据表插件中的行的第2页,有没有什么方法可以克服这个问题?? 下面是我的HTML代码: