使用按钮选择所有复选框[重复]答案

【问题标题】：Select all check boxes using button [duplicate]使用按钮选择所有复选框[重复]
【发布时间】：2015-04-24 07:41:54
【问题描述】：

我的 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>

【问题讨论】：

当用户点击选择它应该选择所有数千条记录为此有办法，你有没有尝试过？

标签： javascript jquery html

【解决方案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

当所有项目都被选中时，这将在“全选”按钮上添加一个类，allChecked（并在所有项目都未选中时将其删除）。此外，它只会在#example（您的表ID example）上下文中查找。当然，这可以根据您的喜好进行调整，就像任何事情一样。

编辑：

并确保您的 jQuery 已加载。试试这个脚本标签（替换你的当前标签）：

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

编辑：刚刚更新了<table> 标签的语法，因为它不是自结束标签

【讨论】：

您的示例在“jsFiddle 上的示例”中工作，但是当我在文件中使用脚本时它不起作用。我还在 SelectAll 按钮中包含了 allChecked 类
您不需要添加任何类。您可能只需要确保所有内容都正确加载：请参阅上面答案中的更新。
@varun 另外，jquery.js 后面隐藏着什么版本的 jQuery？我会确保 jQuery 真的被加载了。
@varun 试试我在答案中发布的脚本标签。
请帮帮我

【解决方案2】：

你可以试试这个：

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

在这段代码中发生了什么：

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

【讨论】：

当 OP 没有表现出尝试自己解决问题的迹象时，解决问题是个好主意吗？
@Regent 是的，没错。我想 OP 必须提供一些他们的尝试。
@Regent 。 OP 昨天在这里提出了一个类似的问题：stackoverflow.com/questions/29823843/…。是否允许？我不确定，这就是你的要求。
@Sourabh- 昨天我问了同样的问题，我也接受了答案。我是 jquery 的新手。昨天的答案在我的演示文件中有效，但是当我在原始文件中使用相同的脚本时，它不起作用。我尝试了很多，但没有奏效。我真的很困惑为什么它不起作用。这不是我发布问题并接受答案并获得赏金的动机。
@Sourabh- OP 没有发布当前代码说它不起作用并描述该代码应该做什么，而是再次提出问题。真正的问题是，看起来 OP 似乎懒得学习如何自己调试。

【解决方案3】：

试试这个

Demo

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

【讨论】：

【解决方案4】：

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

【讨论】：

虽然链接可能提供解释，但您应该在此处发布解决方案。
关于链接的一切都被完美地描述了，所以最好从链接中清除概念。不仅得到解决方案。 @摄政
@XeeShan。 Link 在 SO 中不鼓励仅回答，因为链接可能会在几天后过时。而且因为它需要您到场外寻找解决方案。我们希望网站上有解决方案。引用自here
感谢@Sourab 提供此信息。