Question

我有HTML页面，它有多个复选框，可以单独检查。我有按钮选择，所以我想要做的是。当我点击选择时，所有复选框都应该被选中，数千个记录。

这是我的页面

        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>monitoring</title>
        <script src="jquery.js"></script>
         </head>																			
        <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>

Answer 1

$(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');
  })
});

Example on jsFiddle

这将在＆＃34;全选＆＃34;上添加一个类 allChecked ;检查所有项目后按钮（并在未选中所有项目时将其删除）。此外，它只会在#example（您的带有示例的表）上下文中查看。当然，这可以根据您的喜好进行调整，就像任何事情一样。

编辑：

确保加载jQuery。请尝试使用此脚本标记（替换当前的）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

编辑：刚刚更新了<table>标签的小提琴语法，因为它不是自闭标签

Answer 2

你可以试试这个：

$('#selectAll').click(function(e){
    $(this).toggleClass('clicked');
    $(this).closest('table').find('input[type="checkbox"]').prop('checked', $(this).hasClass('clicked'))
});

在此代码中发生的事情是：

首先绑定按钮上的点击。
单击将虚拟类名切换为按钮。
然后遍历表格并找到所有复选框。
然后将属性checked更改为true/false，这取决于添加到按钮的类。

Answer 3

试试这个

Demo

$("#selectAll").on("click", function () {
    $("#example tr").each( function() {
             $(this).find("input").attr('checked', true);             
    });
});

Answer 4

这里有很好的解释。这里有答案 http://www.sanwebe.com/2014/01/how-to-select-all-deselect-checkboxes-jquery

使用按钮选中所有复选框

4 个答案: