Var*_*run 2 html javascript jquery
我有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>$(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');
})
});
这将在检查所有项目时在"全选"按钮上添加一个类allChecked(并在未选中所有项目时将其删除).此外,它只会在#example(具有id 示例的表)上下文中查找.当然,这可以根据您的喜好进行调整,就像任何事情一样.
编辑:
并确保您的jQuery已加载.请尝试使用此脚本标记(替换当前):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
编辑:刚刚更新了<table>标签的小提琴语法,因为它不是自闭标签