<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
table th,
td {
border: 1px solid #ccc;
background-color: royalblue;
width: 100px;
height: 26px;
color: #fff;
}
table td {
background: #eee;
color: #333;
}
table td:first-child {
text-align: center;
}
</style>
</head>
<body>
<table cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>
<input type="checkbox" class="j_cbAll">
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody class="j_cb">
<tr>
<td><input type="checkbox" class="j-checkbox"></td>
<td>iphone 8</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox" class="j-checkbox"></td>
<td>iphone 7</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox" class="j-checkbox"></td>
<td>iphone 6</td>
<td>3000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>
<input type="checkbox" class="j_cbAll">
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</tfoot>
</table>
<script>
$(function() {
$(".j_cbAll").change(function() {
$(".j-checkbox,.j_cbAll").prop("checked", $(this).prop("checked"))
});
$(".j-checkbox").change(function() {
if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".j_cbAll").prop("checked", true);
} else {
$(".j_cbAll").prop("checked", false);
}
})
})
</script>
</body>
</html>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
