javascript 使用按钮选择所有复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29841547/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select all check boxes using button
提问by Varun
I have HTML page which have multiple check boxes and individually they can be checked. I have button select, so what I am suppose to do is. When I click on select all the check boxes should get selected, thousands record.
我有 HTML 页面，其中有多个复选框，可以单独检查它们。我有按钮选择，所以我想做的是。当我点击选择所有的复选框应该被选中，数千条记录。
This is my page
这是我的页面
<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>回答by Mackan
$(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');
})
});
This will add a class, allChecked, on the "Select All" button when all items have been checked (and remove it when all are unchecked). Also, it will only look within the #example(your table with id example) context. This can be tweaked to your liking of course, as with anything.
当所有项目都被选中时，这将在“全选”按钮上添加一个类allChecked（并在所有项目都未选中时将其删除）。此外，它只会在#example（带有 id示例的表）上下文中查找。这当然可以根据您的喜好进行调整，就像任何事情一样。
Edit:
编辑：
And to make sure that your jQuery is loaded. Try this script tag instead (replace your current):
并确保您的 jQuery 已加载。试试这个脚本标签（替换你当前的）：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Edit:
Just updated the syntax in fiddle for <table>tag as it was not the self closing tag
编辑：刚刚更新了<table>标签的小提琴语法，因为它不是自结束标签
回答by Jai
You can try this:
你可以试试这个：
$('#selectAll').click(function(e){
$(this).toggleClass('clicked');
$(this).closest('table').find('input[type="checkbox"]').prop('checked', $(this).hasClass('clicked'))
});
In this code what happening is:
在这段代码中发生的事情是：
- First you bind the click on the button.
- After click toggle a dummy classname to the button.
- Then traverse up the the table and find all the checkboxes.
- then change the property
checkedtotrue/falsewhich depends on the class added to the button.
- 首先绑定按钮上的点击。
- 单击后，将虚拟类名切换到按钮。
- 然后遍历表格并找到所有复选框。
- 然后更改属性
checked，以true/false依赖于添加到按钮的类。
回答by SimarjeetSingh Panghlia
回答by Xee Shan
very good explanation here. here it with answer http://www.sanwebe.com/2014/01/how-to-select-all-deselect-checkboxes-jquery
这里很好的解释。这里有答案http://www.sanwebe.com/2014/01/how-to-select-all-deselect-checkboxes-jquery
