Howdy编码器，
在这篇文章中，我们将查看如何使用jQuery查看所有复选框。
当您想允许用户单击一个复选框而不是像Amazon这样的一个复选框，而不是一一选择一个复选框时，它会立即选择或取消选择所有复选框时，这将变得有用。
步骤逐步指南选择/取消选择复选框，使用jQuery：
如果您是新手或想在启动本教程之前学习一些基本知识，我必须建议您结帐learn-javascript-from-scratch和jquery-step-by-step-tutorial-for-beginners
所以，在这里我将展示如何使用jQuery来完成此操作。它可能会变得方便，我也在许多项目上使用了它，并且对我有用。
所以让我们开始。
步骤1：
首先，您必须将jQuery库添加到您的页面：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>step-2：
创建一个空白的html文件，然后列出以下代码：
<body>
<div id="container">
<div id="body">
<div class="header" >Check/Uncheck all checkbox with Jquery</div>
<table class="bordered" >
<tr>
<th width="10%"><input type="checkbox" name="chk_all" class="chk_all"></th>
<th >Select All Items</th>
</tr>
<tr>
<td ><input type="checkbox" name="country_id" class="checkboxes" value="6" ></td>
<td > Item-1 </td>
</tr>
<tr>
<td ><input type="checkbox" name="country_id" class="checkboxes" value="7" ></td>
<td > Item-2 </td>
</tr>
<tr>
<td ><input type="checkbox" name="country_id" class="checkboxes" value="8" ></td>
<td > Item-3 </td>
</tr>
<tr>
<td ><input type="checkbox" name="country_id" class="checkboxes" value="9" ></td>
<td > Item-4 </td>
</tr>
<tr>
<td><input type="checkbox" name="country_id" class="checkboxes" value="10" ></td>
<td > Item-5 </td>
</tr>
<tr>
<td ><input type="checkbox" name="country_id" class="checkboxes" value="10" ></td>
<td > Item-6 </td>
</tr>
</table>
</div>
</div>
</body>步骤3：
结束HTML标签后，添加了一些JavaScript代码，包括脚本标签，如下：
<script type="text/javascript">
$(document).ready(function () {
//To Check all checkbox
$(".chk_all").click(function () {
var checkAll = $(".chk_all").prop('checked');
if (checkAll) {
$(".checkboxes").prop("checked", true);
} else {
$(".checkboxes").prop("checked", false);
}
});
// if all checkbox are selected, check the chk_all checkbox
$(".checkboxes").click(function ()
{
if($(".checkboxes").length==$(".subscheked:checked").length)
{
$(".chk_all").attr("checked", "checked");
}
else
{
$(".chk_all").removeAttr("checked");
}
});
});
</script>现在您已经完成了。
完成源代码：
index.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="body">
<div class="header" >Check/Uncheck all checkbox with Jquery</div>
<table class="bordered" >
<tr>
<th width="10%"><input type="checkbox" name="chk_all" class="chk_all"></th>
<th >Select All Items</th>
</tr>
<tr>
<td ><input type="checkbox" name="country_id" class="checkboxes" value="6" ></td>
<td > Item-1 </td>
</tr>
<tr>
<td ><input type="checkbox" name="country_id" class="checkboxes" value="7" ></td>
<td > Item-2 </td>
</tr>
<tr>
<td ><input type="checkbox" name="country_id" class="checkboxes" value="8" ></td>
<td > Item-3 </td>
</tr>
<tr>
<td ><input type="checkbox" name="country_id" class="checkboxes" value="9" ></td>
<td > Item-4 </td>
</tr>
<tr>
<td><input type="checkbox" name="country_id" class="checkboxes" value="10" ></td>
<td > Item-5 </td>
</tr>
<tr>
<td ><input type="checkbox" name="country_id" class="checkboxes" value="10" ></td>
<td > Item-6 </td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
//To Check all checkbox
$(".chk_all").click(function () {
var checkAll = $(".chk_all").prop('checked');
if (checkAll) {
$(".checkboxes").prop("checked", true);
} else {
$(".checkboxes").prop("checked", false);
}
});
// if all checkbox are selected, check the chk_all checkbox
$(".checkboxes").click(function ()
{
if($(".checkboxes").length==$(".subscheked:checked").length)
{
$(".chk_all").attr("checked", "checked");
}
else
{
$(".chk_all").removeAttr("checked");
}
});
});
</script>css：
html, body {
margin:0;
padding:0;
height:100%;
}
body {
border: 0;
color: #000;
}
#body{
width: 500px;
margin: 0 auto;
max-width: 100%;
padding:20px 0 70px 0;
height: 100%;
}
#container {
min-height:100%;
position:relative;
}
.header{
font-size: 25px;
text-align: center;
background-color: #d0dafd;
}
table {
*border-collapse: collapse;
border-spacing: 5px;
width: 100%;
}
.bordered {
border: solid darkgoldenrod 3px;
box-shadow: 0 1px 1px darkgoldenrod;
}
.bordered td {
padding: 10px;
border-bottom: 2px solid #d0dafd;
}
.bordered th {
padding: 10px;
border-bottom: 2px solid darkgoldenrod;
background-color: #eee;
border-top: none;
text-align:center;
}
.bordered tbody tr:nth-child(even) {
background: #eeeeee;
border:1px solid #000;
}
.bordered tbody tr:hover td {
background: #d0dafd;
color: #FF0000;
}
tr td {
text-align: center;
}结论：
感谢您的阅读。
请告诉我，如果您面临任何困难，请随时在下面发表评论，我们喜欢为您提供帮助。如果您有任何反馈建议，请通过评论通知我们。