使用按钮选择所有复选框 [英] Select all check boxes using button
问题描述
我有HTML页面，其中有多个复选框，可单独检查。我有按钮选择，所以我想要做的是。当我点击选择所有复选框应该被选中，数千条记录。
这是我的页面
< html> < HEAD> < meta http-equiv =Content-Typecontent =text / html; charset = ISO-8859-1> <标题>监测< /标题> < script src =jquery.js>< / script> < /头> < table id =exampleclass =myclass/> < THEAD> < TR> <的第i; < button type =buttonid =selectAllclass =main> < span class =sub>< / span>选择< /按>< / th> <的第i;姓名< /第> <的第i;公司< /第> < th>员工类型< / th> <第>地址< /第> <的第i;国家< /第> < / TR> < / THEAD> < TBODY> < TR> < td>< input type =checkbox/> < / TD> < TD> VARUN< / TD> < TD> TCS< / TD> < TD>其< / TD> < td>旧金山< / td> < TD> US< / TD> < / TR> < TR> < td>< input type =checkbox/> < / TD> < TD> Rahuk< / TD> < TD> TCS< / TD> < TD>其< / TD> < td>旧金山< / td> < TD> US< / TD> < / TR> < TR> < td>< input type =checkbox/> < / TD> < td> johm Doe< / td> < TD> TCS< / TD> < TD>其< / TD> < td>旧金山< / td> < TD> US< / TD> < / TR> < TR> < td>< input type =checkbox/> < / TD> < TD>萨姆和LT; / TD> < TD> TCS< / TD> < TD>其< / TD> < td>旧金山< / td> < TD> US< / TD> < / TR> < TR> < td>< input type =checkbox/> < / TD> < TD>拉拉< / TD> < TD> TCS< / TD> < TD>其< / TD> < td>旧金山< / td> < TD> US< / TD> < / TR> < TR> < td>< input type =checkbox/> < / TD> < TD>周杰伦< / TD> < TD> TCS< / TD> < TD>其< / TD> < td>旧金山< / td> < TD> US< / TD> < / TR> < TR> < td>< input type =checkbox/> < / TD> < TD>汤姆与LT; / TD> < TD> TCS< / TD> < TD>其< / TD> < td>旧金山< / td> < TD> US< / TD> < / TR> < / tbody的> < /表> < /体> < / html>
< $（$'$'$>'code> $（document）.ready（function（）{
$（'body'）。on（'click'，'#selectAll'，function（）{
if（$（this）.hasClass（'allChecked'））{
$（'input [type =checkbox]'，'#example'）。prop（'checked'，false）; $ （'checked'，true）;
}
$（'input [type =checkbox]'，'#example'） ）.toggleClass（'allChecked'）;
}）
}）;
这将在全选全选按钮时添加一个类allchecked ，项目已被检查（并且在所有项都未选中时将其删除）。此外，它只会在 #example （您的表中使用id 示例）上下文中查找。当然，这可以根据你的喜好调整，就像任何事情一样。
编辑：
并确保您的jQuery已加载。尝试使用此脚本代码（替换当前的代码）：
< script src =https://ajax.googleapis.com /ajax/libs/jquery/2.1.3/jquery.min.js\"></script>
编辑：
只更新了的小提琴语法<表格> 标记，因为它不是自动关闭标记
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.
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>
$(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.
Edit:
And to make sure that your jQuery is loaded. Try this script tag instead (replace your current):
<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
这篇关于使用按钮选择所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
